<!doctype html>
<html style='font-size:14px !important'>
<head>
<meta charset='UTF-8'><meta name='viewport' content='width=device-width initial-scale=1'>
<title>GUI使用说明</title><style type='text/css'>html {overflow-x: initial !important;}:root { --bg-color:#ffffff; --text-color:#333333; --select-text-bg-color:#B5D6FC; --select-text-font-color:auto; --monospace:"Lucida Console",Consolas,"Courier",monospace; }
html { font-size: 14px; background-color: var(--bg-color); color: var(--text-color); font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
body { margin: 0px; padding: 0px; height: auto; bottom: 0px; top: 0px; left: 0px; right: 0px; font-size: 1rem; line-height: 1.42857; overflow-x: hidden; background: inherit; tab-size: 4; }
iframe { margin: auto; }
a.url { word-break: break-all; }
a:active, a:hover { outline: 0px; }
.in-text-selection, ::selection { text-shadow: none; background: var(--select-text-bg-color); color: var(--select-text-font-color); }
#write { margin: 0px auto; height: auto; width: inherit; word-break: normal; overflow-wrap: break-word; position: relative; white-space: normal; overflow-x: visible; padding-top: 40px; }
#write.first-line-indent p { text-indent: 2em; }
#write.first-line-indent li p, #write.first-line-indent p * { text-indent: 0px; }
#write.first-line-indent li { margin-left: 2em; }
.for-image #write { padding-left: 8px; padding-right: 8px; }
body.typora-export { padding-left: 30px; padding-right: 30px; }
.typora-export .footnote-line, .typora-export li, .typora-export p { white-space: pre-wrap; }
@media screen and (max-width: 500px) {
  body.typora-export { padding-left: 0px; padding-right: 0px; }
  #write { padding-left: 20px; padding-right: 20px; }
  .CodeMirror-sizer { margin-left: 0px !important; }
  .CodeMirror-gutters { display: none !important; }
}
#write li > figure:last-child { margin-bottom: 0.5rem; }
#write ol, #write ul { position: relative; }
img { max-width: 100%; vertical-align: middle; }
button, input, select, textarea { color: inherit; font: inherit; }
input[type="checkbox"], input[type="radio"] { line-height: normal; padding: 0px; }
*, ::after, ::before { box-sizing: border-box; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p, #write pre { width: inherit; }
#write h1, #write h2, #write h3, #write h4, #write h5, #write h6, #write p { position: relative; }
p { line-height: inherit; }
h1, h2, h3, h4, h5, h6 { break-after: avoid-page; break-inside: avoid; orphans: 2; }
p { orphans: 4; }
h1 { font-size: 2rem; }
h2 { font-size: 1.8rem; }
h3 { font-size: 1.6rem; }
h4 { font-size: 1.4rem; }
h5 { font-size: 1.2rem; }
h6 { font-size: 1rem; }
.md-math-block, .md-rawblock, h1, h2, h3, h4, h5, h6, p { margin-top: 1rem; margin-bottom: 1rem; }
.hidden { display: none; }
.md-blockmeta { color: rgb(204, 204, 204); font-weight: 700; font-style: italic; }
a { cursor: pointer; }
sup.md-footnote { padding: 2px 4px; background-color: rgba(238, 238, 238, 0.7); color: rgb(85, 85, 85); border-radius: 4px; cursor: pointer; }
sup.md-footnote a, sup.md-footnote a:hover { color: inherit; text-transform: inherit; text-decoration: inherit; }
#write input[type="checkbox"] { cursor: pointer; width: inherit; height: inherit; }
figure { overflow-x: auto; margin: 1.2em 0px; max-width: calc(100% + 16px); padding: 0px; }
figure > table { margin: 0px !important; }
tr { break-inside: avoid; break-after: auto; }
thead { display: table-header-group; }
table { border-collapse: collapse; border-spacing: 0px; width: 100%; overflow: auto; break-inside: auto; text-align: left; }
table.md-table td { min-width: 32px; }
.CodeMirror-gutters { border-right: 0px; background-color: inherit; }
.CodeMirror-linenumber { user-select: none; }
.CodeMirror { text-align: left; }
.CodeMirror-placeholder { opacity: 0.3; }
.CodeMirror pre { padding: 0px 4px; }
.CodeMirror-lines { padding: 0px; }
div.hr:focus { cursor: none; }
#write pre { white-space: pre-wrap; }
#write.fences-no-line-wrapping pre { white-space: pre; }
#write pre.ty-contain-cm { white-space: normal; }
.CodeMirror-gutters { margin-right: 4px; }
.md-fences { font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; overflow: visible; white-space: pre; background: inherit; position: relative !important; }
.md-diagram-panel { width: 100%; margin-top: 10px; text-align: center; padding-top: 0px; padding-bottom: 8px; overflow-x: auto; }
#write .md-fences.mock-cm { white-space: pre-wrap; }
.md-fences.md-fences-with-lineno { padding-left: 0px; }
#write.fences-no-line-wrapping .md-fences.mock-cm { white-space: pre; overflow-x: auto; }
.md-fences.mock-cm.md-fences-with-lineno { padding-left: 8px; }
.CodeMirror-line, twitterwidget { break-inside: avoid; }
.footnotes { opacity: 0.8; font-size: 0.9rem; margin-top: 1em; margin-bottom: 1em; }
.footnotes + .footnotes { margin-top: 0px; }
.md-reset { margin: 0px; padding: 0px; border: 0px; outline: 0px; vertical-align: top; background: 0px 0px; text-decoration: none; text-shadow: none; float: none; position: static; width: auto; height: auto; white-space: nowrap; cursor: inherit; -webkit-tap-highlight-color: transparent; line-height: normal; font-weight: 400; text-align: left; box-sizing: content-box; direction: ltr; }
li div { padding-top: 0px; }
blockquote { margin: 1rem 0px; }
li .mathjax-block, li p { margin: 0.5rem 0px; }
li { margin: 0px; position: relative; }
blockquote > :last-child { margin-bottom: 0px; }
blockquote > :first-child, li > :first-child { margin-top: 0px; }
.footnotes-area { color: rgb(136, 136, 136); margin-top: 0.714rem; padding-bottom: 0.143rem; white-space: normal; }
#write .footnote-line { white-space: pre-wrap; }
@media print {
  body, html { border: 1px solid transparent; height: 99%; break-after: avoid; break-before: avoid; }
  #write { margin-top: 0px; padding-top: 0px; border-color: transparent !important; }
  .typora-export * { -webkit-print-color-adjust: exact; }
  html.blink-to-pdf { font-size: 13px; }
  .typora-export #write { padding-left: 32px; padding-right: 32px; padding-bottom: 0px; break-after: avoid; }
  .typora-export #write::after { height: 0px; }
}
.footnote-line { margin-top: 0.714em; font-size: 0.7em; }
a img, img a { cursor: pointer; }
pre.md-meta-block { font-size: 0.8rem; min-height: 0.8rem; white-space: pre-wrap; background: rgb(204, 204, 204); display: block; overflow-x: hidden; }
p > .md-image:only-child:not(.md-img-error) img, p > img:only-child { display: block; margin: auto; }
p > .md-image:only-child { display: inline-block; width: 100%; }
#write .MathJax_Display { margin: 0.8em 0px 0px; }
.md-math-block { width: 100%; }
.md-math-block:not(:empty)::after { display: none; }
[contenteditable="true"]:active, [contenteditable="true"]:focus { outline: 0px; box-shadow: none; }
.md-task-list-item { position: relative; list-style-type: none; }
.task-list-item.md-task-list-item { padding-left: 0px; }
.md-task-list-item > input { position: absolute; top: 0px; left: 0px; margin-left: -1.2em; margin-top: calc(1em - 10px); border: none; }
.math { font-size: 1rem; }
.md-toc { min-height: 3.58rem; position: relative; font-size: 0.9rem; border-radius: 10px; }
.md-toc-content { position: relative; margin-left: 0px; }
.md-toc-content::after, .md-toc::after { display: none; }
.md-toc-item { display: block; color: rgb(65, 131, 196); }
.md-toc-item a { text-decoration: none; }
.md-toc-inner:hover { text-decoration: underline; }
.md-toc-inner { display: inline-block; cursor: pointer; }
.md-toc-h1 .md-toc-inner { margin-left: 0px; font-weight: 700; }
.md-toc-h2 .md-toc-inner { margin-left: 2em; }
.md-toc-h3 .md-toc-inner { margin-left: 4em; }
.md-toc-h4 .md-toc-inner { margin-left: 6em; }
.md-toc-h5 .md-toc-inner { margin-left: 8em; }
.md-toc-h6 .md-toc-inner { margin-left: 10em; }
@media screen and (max-width: 48em) {
  .md-toc-h3 .md-toc-inner { margin-left: 3.5em; }
  .md-toc-h4 .md-toc-inner { margin-left: 5em; }
  .md-toc-h5 .md-toc-inner { margin-left: 6.5em; }
  .md-toc-h6 .md-toc-inner { margin-left: 8em; }
}
a.md-toc-inner { font-size: inherit; font-style: inherit; font-weight: inherit; line-height: inherit; }
.footnote-line a:not(.reversefootnote) { color: inherit; }
.md-attr { display: none; }
.md-fn-count::after { content: "."; }
code, pre, samp, tt { font-family: var(--monospace); }
kbd { margin: 0px 0.1em; padding: 0.1em 0.6em; font-size: 0.8em; color: rgb(36, 39, 41); background: rgb(255, 255, 255); border: 1px solid rgb(173, 179, 185); border-radius: 3px; box-shadow: rgba(12, 13, 14, 0.2) 0px 1px 0px, rgb(255, 255, 255) 0px 0px 0px 2px inset; white-space: nowrap; vertical-align: middle; }
.md-comment { color: rgb(162, 127, 3); opacity: 0.8; font-family: var(--monospace); }
code { text-align: left; vertical-align: initial; }
a.md-print-anchor { white-space: pre !important; border-width: initial !important; border-style: none !important; border-color: initial !important; display: inline-block !important; position: absolute !important; width: 1px !important; right: 0px !important; outline: 0px !important; background: 0px 0px !important; text-decoration: initial !important; text-shadow: initial !important; }
.md-inline-math .MathJax_SVG .noError { display: none !important; }
.html-for-mac .inline-math-svg .MathJax_SVG { vertical-align: 0.2px; }
.md-math-block .MathJax_SVG_Display { text-align: center; margin: 0px; position: relative; text-indent: 0px; max-width: none; max-height: none; min-height: 0px; min-width: 100%; width: auto; overflow-y: hidden; display: block !important; }
.MathJax_SVG_Display, .md-inline-math .MathJax_SVG_Display { width: auto; margin: inherit; display: inline-block !important; }
.MathJax_SVG .MJX-monospace { font-family: var(--monospace); }
.MathJax_SVG .MJX-sans-serif { font-family: sans-serif; }
.MathJax_SVG { display: inline; font-style: normal; font-weight: 400; line-height: normal; zoom: 90%; text-indent: 0px; text-align: left; text-transform: none; letter-spacing: normal; word-spacing: normal; overflow-wrap: normal; white-space: nowrap; float: none; direction: ltr; max-width: none; max-height: none; min-width: 0px; min-height: 0px; border: 0px; padding: 0px; margin: 0px; }
.MathJax_SVG * { transition: none 0s ease 0s; }
.MathJax_SVG_Display svg { vertical-align: middle !important; margin-bottom: 0px !important; margin-top: 0px !important; }
.os-windows.monocolor-emoji .md-emoji { font-family: "Segoe UI Symbol", sans-serif; }
.md-diagram-panel > svg { max-width: 100%; }
[lang="mermaid"] svg, [lang="flow"] svg { max-width: 100%; height: auto; }
[lang="mermaid"] .node text { font-size: 1rem; }
table tr th { border-bottom: 0px; }
video { max-width: 100%; display: block; margin: 0px auto; }
iframe { max-width: 100%; width: 100%; border: none; }
.highlight td, .highlight tr { border: 0px; }


.CodeMirror { height: auto; }
.CodeMirror.cm-s-inner { background: inherit; }
.CodeMirror-scroll { overflow: auto hidden; z-index: 3; }
.CodeMirror-gutter-filler, .CodeMirror-scrollbar-filler { background-color: rgb(255, 255, 255); }
.CodeMirror-gutters { border-right: 1px solid rgb(221, 221, 221); background: inherit; white-space: nowrap; }
.CodeMirror-linenumber { padding: 0px 3px 0px 5px; text-align: right; color: rgb(153, 153, 153); }
.cm-s-inner .cm-keyword { color: rgb(119, 0, 136); }
.cm-s-inner .cm-atom, .cm-s-inner.cm-atom { color: rgb(34, 17, 153); }
.cm-s-inner .cm-number { color: rgb(17, 102, 68); }
.cm-s-inner .cm-def { color: rgb(0, 0, 255); }
.cm-s-inner .cm-variable { color: rgb(0, 0, 0); }
.cm-s-inner .cm-variable-2 { color: rgb(0, 85, 170); }
.cm-s-inner .cm-variable-3 { color: rgb(0, 136, 85); }
.cm-s-inner .cm-string { color: rgb(170, 17, 17); }
.cm-s-inner .cm-property { color: rgb(0, 0, 0); }
.cm-s-inner .cm-operator { color: rgb(152, 26, 26); }
.cm-s-inner .cm-comment, .cm-s-inner.cm-comment { color: rgb(170, 85, 0); }
.cm-s-inner .cm-string-2 { color: rgb(255, 85, 0); }
.cm-s-inner .cm-meta { color: rgb(85, 85, 85); }
.cm-s-inner .cm-qualifier { color: rgb(85, 85, 85); }
.cm-s-inner .cm-builtin { color: rgb(51, 0, 170); }
.cm-s-inner .cm-bracket { color: rgb(153, 153, 119); }
.cm-s-inner .cm-tag { color: rgb(17, 119, 0); }
.cm-s-inner .cm-attribute { color: rgb(0, 0, 204); }
.cm-s-inner .cm-header, .cm-s-inner.cm-header { color: rgb(0, 0, 255); }
.cm-s-inner .cm-quote, .cm-s-inner.cm-quote { color: rgb(0, 153, 0); }
.cm-s-inner .cm-hr, .cm-s-inner.cm-hr { color: rgb(153, 153, 153); }
.cm-s-inner .cm-link, .cm-s-inner.cm-link { color: rgb(0, 0, 204); }
.cm-negative { color: rgb(221, 68, 68); }
.cm-positive { color: rgb(34, 153, 34); }
.cm-header, .cm-strong { font-weight: 700; }
.cm-del { text-decoration: line-through; }
.cm-em { font-style: italic; }
.cm-link { text-decoration: underline; }
.cm-error { color: red; }
.cm-invalidchar { color: red; }
.cm-constant { color: rgb(38, 139, 210); }
.cm-defined { color: rgb(181, 137, 0); }
div.CodeMirror span.CodeMirror-matchingbracket { color: rgb(0, 255, 0); }
div.CodeMirror span.CodeMirror-nonmatchingbracket { color: rgb(255, 34, 34); }
.cm-s-inner .CodeMirror-activeline-background { background: inherit; }
.CodeMirror { position: relative; overflow: hidden; }
.CodeMirror-scroll { height: 100%; outline: 0px; position: relative; box-sizing: content-box; background: inherit; }
.CodeMirror-sizer { position: relative; }
.CodeMirror-gutter-filler, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-vscrollbar { position: absolute; z-index: 6; display: none; }
.CodeMirror-vscrollbar { right: 0px; top: 0px; overflow: hidden; }
.CodeMirror-hscrollbar { bottom: 0px; left: 0px; overflow: hidden; }
.CodeMirror-scrollbar-filler { right: 0px; bottom: 0px; }
.CodeMirror-gutter-filler { left: 0px; bottom: 0px; }
.CodeMirror-gutters { position: absolute; left: 0px; top: 0px; padding-bottom: 30px; z-index: 3; }
.CodeMirror-gutter { white-space: normal; height: 100%; box-sizing: content-box; padding-bottom: 30px; margin-bottom: -32px; display: inline-block; }
.CodeMirror-gutter-wrapper { position: absolute; z-index: 4; background: 0px 0px !important; border: none !important; }
.CodeMirror-gutter-background { position: absolute; top: 0px; bottom: 0px; z-index: 4; }
.CodeMirror-gutter-elt { position: absolute; cursor: default; z-index: 4; }
.CodeMirror-lines { cursor: text; }
.CodeMirror pre { border-radius: 0px; border-width: 0px; background: 0px 0px; font-family: inherit; font-size: inherit; margin: 0px; white-space: pre; overflow-wrap: normal; color: inherit; z-index: 2; position: relative; overflow: visible; }
.CodeMirror-wrap pre { overflow-wrap: break-word; white-space: pre-wrap; word-break: normal; }
.CodeMirror-code pre { border-right: 30px solid transparent; width: fit-content; }
.CodeMirror-wrap .CodeMirror-code pre { border-right: none; width: auto; }
.CodeMirror-linebackground { position: absolute; left: 0px; right: 0px; top: 0px; bottom: 0px; z-index: 0; }
.CodeMirror-linewidget { position: relative; z-index: 2; overflow: auto; }
.CodeMirror-wrap .CodeMirror-scroll { overflow-x: hidden; }
.CodeMirror-measure { position: absolute; width: 100%; height: 0px; overflow: hidden; visibility: hidden; }
.CodeMirror-measure pre { position: static; }
.CodeMirror div.CodeMirror-cursor { position: absolute; visibility: hidden; border-right: none; width: 0px; }
.CodeMirror div.CodeMirror-cursor { visibility: hidden; }
.CodeMirror-focused div.CodeMirror-cursor { visibility: inherit; }
.cm-searching { background: rgba(255, 255, 0, 0.4); }
@media print {
  .CodeMirror div.CodeMirror-cursor { visibility: hidden; }
}


:root { --title-font: "Inter Display", "Inter"; --text-font: "Inter"; --general-font-feature-settings: "calt", "ccmp", "kern", "salt" 0; --cjk-font: "Source Han Sans SC", "思源黑体 CN", "思源黑体"; --mono-font: "JetBrains Mono"; --fallback-font: "system-ui", "Helvetica Neue", Helvetica, Arial, sans-serif; }
:root { --color-scale-black: #1b1f23; --color-scale-white: #fff; --color-scale-gray-0: #fafbfc; --color-scale-gray-1: #f6f8fa; --color-scale-gray-2: #e1e4e8; --color-scale-gray-3: #d1d5da; --color-scale-gray-4: #959da5; --color-scale-gray-5: #6a737d; --color-scale-gray-6: #586069; --color-scale-gray-7: #444d56; --color-scale-gray-8: #2f363d; --color-scale-gray-9: #24292e; --color-scale-blue-0: #f1f8ff; --color-scale-blue-1: #dbedff; --color-scale-blue-2: #c8e1ff; --color-scale-blue-3: #79b8ff; --color-scale-blue-4: #2188ff; --color-scale-blue-5: #0366d6; --color-scale-blue-6: #005cc5; --color-scale-blue-7: #044289; --color-scale-blue-8: #032f62; --color-scale-blue-9: #05264c; --mark-bg: #ffde67; --mark-text: #080a10; --color-cm-keyword: #3b78e7; --color-cm-attr: #9c27b0; --color-cm-comment: #6a737d; --color-cm-string: #0d904f; --color-cm-operator: #d81b60; --color-cm-number: #d81b60; --color-cm-meta: #6933b1; --color-cm-builtin: #e36209; --color-cm-v3: #43a8b3; --color-cm-v: #c53929; --color-cm-link: #24a3c3; --text-link: #486df1; --bookmark-color: #311b92; --bookmark-bg: #ae92e3; --star-color: #044289; --star-bg: var(--color-scale-blue-2); --question-color: #880e4f; --question-bg: #f8bbd0; --alert-color: #8a2a0d; --alert-bg: #e69d94; --note-color: #004d40; --note-bg: #8be3d6; --lightbulb-color: #b0791b; --lightbulb-bg: #fff9c4; }
:root { --control-text-color: var(--color-text-secondary); --bg-color: #ffffff; --text-color: var(--color-text-primary); --md-char-color: #b3bdd1; --meta-content-color: #398ea3; --primary-color: #486df1; --accent-color: #486df1; --primary-btn-border-color: var(--color-border-primary); --primary-btn-text-color: #fff; --window-border: 1px solid var(--color-bg-tertiary); --active-file-bg-color: var(--color-auto-blue-1); --active-file-text-color: inherit; --active-file-border-color: var(--color-auto-blue-6); --side-bar-bg-color: #f9fafb; --item-hover-bg-color: rgba(229, 229, 229, 0.59); --item-hover-text-color: inherit; --checkbox-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M18%203C19.6569%203%2021%204.34315%2021%206V18C21%2019.6569%2019.6569%2021%2018%2021H6C4.34315%2021%203%2019.6569%203%2018V6C3%204.34315%204.34315%203%206%203H18ZM16.4697%207.96967L10%2014.4393L7.53033%2011.9697C7.23744%2011.6768%206.76256%2011.6768%206.46967%2011.9697C6.17678%2012.2626%206.17678%2012.7374%206.46967%2013.0303L9.46967%2016.0303C9.76256%2016.3232%2010.2374%2016.3232%2010.5303%2016.0303L17.5303%209.03033C17.8232%208.73744%2017.8232%208.26256%2017.5303%207.96967C17.2374%207.67678%2016.7626%207.67678%2016.4697%207.96967Z%22%20fill%3D%22%23486df1%22/%3E%0A%3C/svg%3E%0A"); --dots: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M10%206C9.30964%206%208.75%205.44036%208.75%204.75C8.75%204.05964%209.30964%203.5%2010%203.5C10.6904%203.5%2011.25%204.05964%2011.25%204.75C11.25%205.44036%2010.6904%206%2010%206Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M10%2011.25C9.30964%2011.25%208.75%2010.6904%208.75%2010C8.75%209.30964%209.30964%208.75%2010%208.75C10.6904%208.75%2011.25%209.30964%2011.25%2010C11.25%2010.6904%2010.6904%2011.25%2010%2011.25Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M8.75%2015.25C8.75%2015.9404%209.30964%2016.5%2010%2016.5C10.6904%2016.5%2011.25%2015.9404%2011.25%2015.25C11.25%2014.5596%2010.6904%2014%2010%2014C9.30964%2014%208.75%2014.5596%208.75%2015.25Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --cells: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.5%2011C8.32843%2011%209%2011.6716%209%2012.5V16.5C9%2017.3284%208.32843%2018%207.5%2018H3.5C2.67157%2018%202%2017.3284%202%2016.5V12.5C2%2011.6716%202.67157%2011%203.5%2011H7.5ZM16.5%2011C17.3284%2011%2018%2011.6716%2018%2012.5V16.5C18%2017.3284%2017.3284%2018%2016.5%2018H12.5C11.6716%2018%2011%2017.3284%2011%2016.5V12.5C11%2011.6716%2011.6716%2011%2012.5%2011H16.5ZM7.5%2012H3.5C3.22386%2012%203%2012.2239%203%2012.5V16.5C3%2016.7761%203.22386%2017%203.5%2017H7.5C7.77614%2017%208%2016.7761%208%2016.5V12.5C8%2012.2239%207.77614%2012%207.5%2012ZM16.5%2012H12.5C12.2239%2012%2012%2012.2239%2012%2012.5V16.5C12%2016.7761%2012.2239%2017%2012.5%2017H16.5C16.7761%2017%2017%2016.7761%2017%2016.5V12.5C17%2012.2239%2016.7761%2012%2016.5%2012ZM7.5%202C8.32843%202%209%202.67157%209%203.5V7.5C9%208.32843%208.32843%209%207.5%209H3.5C2.67157%209%202%208.32843%202%207.5V3.5C2%202.67157%202.67157%202%203.5%202H7.5ZM16.5%202C17.3284%202%2018%202.67157%2018%203.5V7.5C18%208.32843%2017.3284%209%2016.5%209H12.5C11.6716%209%2011%208.32843%2011%207.5V3.5C11%202.67157%2011.6716%202%2012.5%202H16.5ZM7.5%203H3.5C3.22386%203%203%203.22386%203%203.5V7.5C3%207.77614%203.22386%208%203.5%208H7.5C7.77614%208%208%207.77614%208%207.5V3.5C8%203.22386%207.77614%203%207.5%203ZM16.5%203H12.5C12.2239%203%2012%203.22386%2012%203.5V7.5C12%207.77614%2012.2239%208%2012.5%208H16.5C16.7761%208%2017%207.77614%2017%207.5V3.5C17%203.22386%2016.7761%203%2016.5%203Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --add: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.5%2016.5C9.5%2016.7761%209.72386%2017%2010%2017C10.2761%2017%2010.5%2016.7761%2010.5%2016.5V10.5H16.5C16.7761%2010.5%2017%2010.2761%2017%2010C17%209.72386%2016.7761%209.5%2016.5%209.5H10.5V3.5C10.5%203.22386%2010.2761%203%2010%203C9.72386%203%209.5%203.22386%209.5%203.5V9.5H3.5C3.22386%209.5%203%209.72386%203%2010C3%2010.2761%203.22386%2010.5%203.5%2010.5H9.5V16.5Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --chevron-right: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.46967%202.21967C4.17678%202.51256%204.17678%202.98744%204.46967%203.28033L7.18934%206L4.46967%208.71967C4.17678%209.01256%204.17678%209.48744%204.46967%209.78033C4.76256%2010.0732%205.23744%2010.0732%205.53033%209.78033L8.78033%206.53033C9.07322%206.23744%209.07322%205.76256%208.78033%205.46967L5.53033%202.21967C5.23744%201.92678%204.76256%201.92678%204.46967%202.21967Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --chevron-down: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M2.21967%204.46967C2.51256%204.17678%202.98744%204.17678%203.28033%204.46967L6%207.18934L8.71967%204.46967C9.01256%204.17678%209.48744%204.17678%209.78033%204.46967C10.0732%204.76256%2010.0732%205.23744%209.78033%205.53033L6.53033%208.78033C6.23744%209.07322%205.76256%209.07322%205.46967%208.78033L2.21967%205.53033C1.92678%205.23744%201.92678%204.76256%202.21967%204.46967Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --document: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.5%207C7.22386%207%207%207.22386%207%207.5C7%207.77614%207.22386%208%207.5%208H12.5C12.7761%208%2013%207.77614%2013%207.5C13%207.22386%2012.7761%207%2012.5%207H7.5Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M7%2010.5C7%2010.2239%207.22386%2010%207.5%2010H12.5C12.7761%2010%2013%2010.2239%2013%2010.5C13%2010.7761%2012.7761%2011%2012.5%2011H7.5C7.22386%2011%207%2010.7761%207%2010.5Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M7.5%2013C7.22386%2013%207%2013.2239%207%2013.5C7%2013.7761%207.22386%2014%207.5%2014H9.5C9.77614%2014%2010%2013.7761%2010%2013.5C10%2013.2239%209.77614%2013%209.5%2013H7.5Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M6.5%202C6.22386%202%206%202.22386%206%202.5V3H5.5C4.67157%203%204%203.67157%204%204.5V16.5C4%2017.3284%204.67157%2018%205.5%2018H11.5C11.6326%2018%2011.7598%2017.9473%2011.8536%2017.8536L15.8536%2013.8536C15.9473%2013.7598%2016%2013.6326%2016%2013.5V4.5C16%203.67157%2015.3284%203%2014.5%203H14V2.5C14%202.22386%2013.7761%202%2013.5%202C13.2239%202%2013%202.22386%2013%202.5V3H10.5V2.5C10.5%202.22386%2010.2761%202%2010%202C9.72386%202%209.5%202.22386%209.5%202.5V3H7V2.5C7%202.22386%206.77614%202%206.5%202ZM14.5%204C14.7761%204%2015%204.22386%2015%204.5V13H12.5C11.6716%2013%2011%2013.6716%2011%2014.5V17H5.5C5.22386%2017%205%2016.7761%205%2016.5V4.5C5%204.22386%205.22386%204%205.5%204H14.5ZM14.2929%2014L12%2016.2929V14.5C12%2014.2239%2012.2239%2014%2012.5%2014H14.2929Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --folder: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.16667%203C7.43713%203%207.70151%203.0731%207.93238%203.21016L8.06667%203.3L9.667%204.5H15.5C16.7703%204.5%2017.8192%205.44737%2017.9789%206.67409L17.9947%206.83562L18%207V14.5C18%2015.8255%2016.9685%2016.91%2015.6644%2016.9947L15.5%2017H4.5C3.17452%2017%202.08996%2015.9685%202.00532%2014.6644L2%2014.5V5.5C2%204.17452%203.03154%203.08996%204.33562%203.00532L4.5%203H7.16667ZM8.15763%207.03449C7.90991%207.2946%207.57838%207.45592%207.22435%207.49219L7.07143%207.5L3%207.499V14.5C3%2015.2797%203.59489%2015.9204%204.35554%2015.9931L4.5%2016H15.5C16.2797%2016%2016.9204%2015.4051%2016.9931%2014.6445L17%2014.5V7C17%206.2203%2016.4051%205.57955%2015.6445%205.50687L15.5%205.5H9.617L8.15763%207.03449ZM7.16667%204H4.5C3.7203%204%203.07955%204.59489%203.00687%205.35554L3%205.5V6.499L7.07143%206.5C7.1809%206.5%207.28655%206.46411%207.37274%206.39902L7.4335%206.34483L8.694%205.021L7.46667%204.1C7.40176%204.05132%207.32632%204.01941%207.24701%204.0065L7.16667%204Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --navigation: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M3%206.5C3.55228%206.5%204%206.05228%204%205.5C4%204.94772%203.55228%204.5%203%204.5C2.44772%204.5%202%204.94772%202%205.5C2%206.05228%202.44772%206.5%203%206.5ZM6%205.5C6%205.22386%206.22386%205%206.5%205H17.5C17.7761%205%2018%205.22386%2018%205.5C18%205.77614%2017.7761%206%2017.5%206H6.5C6.22386%206%206%205.77614%206%205.5ZM6%209.5C6%209.22386%206.22386%209%206.5%209H17.5C17.7761%209%2018%209.22386%2018%209.5C18%209.77614%2017.7761%2010%2017.5%2010H6.5C6.22386%2010%206%209.77614%206%209.5ZM6.5%2013C6.22386%2013%206%2013.2239%206%2013.5C6%2013.7761%206.22386%2014%206.5%2014H17.5C17.7761%2014%2018%2013.7761%2018%2013.5C18%2013.2239%2017.7761%2013%2017.5%2013H6.5ZM4%2013.5C4%2014.0523%203.55228%2014.5%203%2014.5C2.44772%2014.5%202%2014.0523%202%2013.5C2%2012.9477%202.44772%2012.5%203%2012.5C3.55228%2012.5%204%2012.9477%204%2013.5ZM3%2010.5C3.55228%2010.5%204%2010.0523%204%209.5C4%208.94772%203.55228%208.5%203%208.5C2.44772%208.5%202%208.94772%202%209.5C2%2010.0523%202.44772%2010.5%203%2010.5Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --tree: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9%205C9%203.34315%207.65685%202%206%202C4.34315%202%203%203.34315%203%205C3%206.4865%204.08114%207.72048%205.5%207.95852V12.0415C4.08114%2012.2795%203%2013.5135%203%2015C3%2016.6569%204.34315%2018%206%2018C7.65685%2018%209%2016.6569%209%2015C9%2013.5135%207.91886%2012.2795%206.5%2012.0415V11H12C13.3807%2011%2014.5%209.88071%2014.5%208.5V7.95852C15.9189%207.72048%2017%206.4865%2017%205C17%203.34315%2015.6569%202%2014%202C12.3431%202%2011%203.34315%2011%205C11%206.4865%2012.0811%207.72048%2013.5%207.95852V8.5C13.5%209.32843%2012.8284%2010%2012%2010H6.5V7.95852C7.91886%207.72048%209%206.4865%209%205ZM6%207C4.89543%207%204%206.10457%204%205C4%203.89543%204.89543%203%206%203C7.10457%203%208%203.89543%208%205C8%206.10457%207.10457%207%206%207ZM6%2017C4.89543%2017%204%2016.1046%204%2015C4%2013.8954%204.89543%2013%206%2013C7.10457%2013%208%2013.8954%208%2015C8%2016.1046%207.10457%2017%206%2017ZM16%205C16%206.10457%2015.1046%207%2014%207C12.8954%207%2012%206.10457%2012%205C12%203.89543%2012.8954%203%2014%203C15.1046%203%2016%203.89543%2016%205Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --search: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M8.5%203C11.5376%203%2014%205.46243%2014%208.5C14%209.83879%2013.5217%2011.0659%2012.7266%2012.0196L16.8536%2016.1464C17.0488%2016.3417%2017.0488%2016.6583%2016.8536%2016.8536C16.68%2017.0271%2016.4106%2017.0464%2016.2157%2016.9114L16.1464%2016.8536L12.0196%2012.7266C11.0659%2013.5217%209.83879%2014%208.5%2014C5.46243%2014%203%2011.5376%203%208.5C3%205.46243%205.46243%203%208.5%203ZM8.5%204C6.01472%204%204%206.01472%204%208.5C4%2010.9853%206.01472%2013%208.5%2013C10.9853%2013%2013%2010.9853%2013%208.5C13%206.01472%2010.9853%204%208.5%204Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --checkbox-checked: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M18.25%203C19.7688%203%2021%204.23122%2021%205.75V18.25C21%2019.7688%2019.7688%2021%2018.25%2021H5.75C4.23122%2021%203%2019.7688%203%2018.25V5.75C3%204.23122%204.23122%203%205.75%203H18.25ZM18.25%204.5H5.75C5.05964%204.5%204.5%205.05964%204.5%205.75V18.25C4.5%2018.9404%205.05964%2019.5%205.75%2019.5H18.25C18.9404%2019.5%2019.5%2018.9404%2019.5%2018.25V5.75C19.5%205.05964%2018.9404%204.5%2018.25%204.5ZM10%2014.4393L16.4697%207.96967C16.7626%207.67678%2017.2374%207.67678%2017.5303%207.96967C17.7966%208.23594%2017.8208%208.6526%2017.6029%208.94621L17.5303%209.03033L10.5303%2016.0303C10.2641%2016.2966%209.8474%2016.3208%209.55379%2016.1029L9.46967%2016.0303L6.46967%2013.0303C6.17678%2012.7374%206.17678%2012.2626%206.46967%2011.9697C6.73594%2011.7034%207.1526%2011.6792%207.44621%2011.8971L7.53033%2011.9697L10%2014.4393L16.4697%207.96967L10%2014.4393Z%22%20fill%3D%22%23000%22/%3E%0A%3C/svg%3E%0A"); --checkbox-unchecked: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M5.75%203H18.25C19.7688%203%2021%204.23122%2021%205.75V18.25C21%2019.7688%2019.7688%2021%2018.25%2021H5.75C4.23122%2021%203%2019.7688%203%2018.25V5.75C3%204.23122%204.23122%203%205.75%203ZM5.75%204.5C5.05964%204.5%204.5%205.05964%204.5%205.75V18.25C4.5%2018.9404%205.05964%2019.5%205.75%2019.5H18.25C18.9404%2019.5%2019.5%2018.9404%2019.5%2018.25V5.75C19.5%205.05964%2018.9404%204.5%2018.25%204.5H5.75Z%22%20fill%3D%22%23000%22/%3E%0A%3C/svg%3E%0A"); --case: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M13.4911%203.50005C13.7013%203.50299%2013.8873%203.63714%2013.9563%203.83574L17.6085%2014.3357C17.6992%2014.5966%2017.5613%2014.8815%2017.3005%2014.9722C17.0397%2015.063%2016.7547%2014.9251%2016.664%2014.6643L15.7373%2012L10.9833%2012L9.96737%2014.6774C9.8694%2014.9356%209.58069%2015.0654%209.32251%2014.9675C9.06433%2014.8695%208.93445%2014.5808%209.03241%2014.3226L10.2727%2011.0539V11H10.2932L13.0166%203.82262C13.0912%203.62603%2013.2808%203.49711%2013.4911%203.50005ZM13.4636%205.46323L11.3627%2011L15.3895%2011L13.4636%205.46323Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M5.6667%208.70091L5.85817%208.70749C7.16522%208.77248%207.94311%209.52482%207.997%2010.737L8%2010.8735V14.5402C8%2014.7933%207.8119%2015.0025%207.56785%2015.0356L7.5%2015.0402C7.24687%2015.0402%207.03767%2014.8521%207.00456%2014.6081L7%2014.5402L6.9991%2014.4706C6.34072%2014.8475%205.7317%2015.0402%205.16667%2015.0402C3.94105%2015.0402%203%2014.1772%203%2012.8735C3%2011.724%203.79229%2010.8699%205.10646%2010.7105C5.728%2010.6351%206.35968%2010.6823%206.99902%2010.8503C6.99247%2010.1122%206.62837%209.74702%205.8085%209.70625C5.16701%209.67435%204.7162%209.76443%204.45216%209.94958C4.22607%2010.1081%203.91426%2010.0534%203.75572%209.82728C3.59717%209.60118%203.65193%209.28937%203.87802%209.13083C4.31656%208.8233%204.91381%208.68705%205.6667%208.70091ZM6.99933%2011.916L6.79742%2011.8558C6.25917%2011.7078%205.73655%2011.6657%205.22687%2011.7275C4.40527%2011.8271%204%2012.264%204%2012.8978C4%2013.6289%204.47493%2014.0644%205.16667%2014.0644C5.62021%2014.0644%206.17899%2013.8549%206.83419%2013.422L6.99933%2013.3094V11.916Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --arrowleft: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.16289%2016.8692C9.36683%2017.0555%209.68308%2017.0411%209.86926%2016.8371C10.0554%2016.6331%2010.041%2016.3168%209.83711%2016.1306L3.66925%2010.4988L17.5%2010.4988C17.7761%2010.4988%2018%2010.2749%2018%209.99868C18%209.72249%2017.7761%209.49859%2017.5%209.49859L3.67214%209.49859L9.83711%203.86943C10.041%203.68322%2010.0554%203.3669%209.86926%203.16293C9.68308%202.95895%209.36683%202.94455%209.16289%203.13076L2.24654%209.446C2.10659%209.57378%202.02676%209.74135%202.00705%209.91453C2.00241%209.94189%202%209.97%202%209.99868C2%2010.0256%202.00212%2010.0519%202.0062%2010.0777C2.02437%2010.2536%202.10449%2010.4243%202.24654%2010.554L9.16289%2016.8692Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --match: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.5%2012.75C9.5%2013.1642%209.16421%2013.5%208.75%2013.5C8.33579%2013.5%208%2013.1642%208%2012.75C8%2012.3358%208.33579%2012%208.75%2012C9.16421%2012%209.5%2012.3358%209.5%2012.75Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M11.75%2012.75C11.75%2013.1642%2011.4142%2013.5%2011%2013.5C10.5858%2013.5%2010.25%2013.1642%2010.25%2012.75C10.25%2012.3358%2010.5858%2012%2011%2012C11.4142%2012%2011.75%2012.3358%2011.75%2012.75Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M14%2012.75C14%2013.1642%2013.6642%2013.5%2013.25%2013.5C12.8358%2013.5%2012.5%2013.1642%2012.5%2012.75C12.5%2012.3358%2012.8358%2012%2013.25%2012C13.6642%2012%2014%2012.3358%2014%2012.75Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M16.25%2012.75C16.25%2013.1642%2015.9142%2013.5%2015.5%2013.5C15.0858%2013.5%2014.75%2013.1642%2014.75%2012.75C14.75%2012.3358%2015.0858%2012%2015.5%2012C15.9142%2012%2016.25%2012.3358%2016.25%2012.75Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M8.75%208C9.16421%208%209.5%207.66421%209.5%207.25C9.5%206.83579%209.16421%206.5%208.75%206.5C8.33579%206.5%208%206.83579%208%207.25C8%207.66421%208.33579%208%208.75%208Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M11%208C11.4142%208%2011.75%207.66421%2011.75%207.25C11.75%206.83579%2011.4142%206.5%2011%206.5C10.5858%206.5%2010.25%206.83579%2010.25%207.25C10.25%207.66421%2010.5858%208%2011%208Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M13.25%208C13.6642%208%2014%207.66421%2014%207.25C14%206.83579%2013.6642%206.5%2013.25%206.5C12.8358%206.5%2012.5%206.83579%2012.5%207.25C12.5%207.66421%2012.8358%208%2013.25%208Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M15.5%208C15.9142%208%2016.25%207.66421%2016.25%207.25C16.25%206.83579%2015.9142%206.5%2015.5%206.5C15.0858%206.5%2014.75%206.83579%2014.75%207.25C14.75%207.66421%2015.0858%208%2015.5%208Z%22%20fill%3D%22%23636566%22/%3E%0A%3Cpath%20d%3D%22M2%207C2%205.34315%203.34315%204%205%204H15C16.6569%204%2018%205.34315%2018%207V13C18%2014.6569%2016.6569%2016%2015%2016H5C3.34315%2016%202%2014.6569%202%2013V7ZM5%205C3.89543%205%203%205.89543%203%207V9.5H6V5H5ZM6%2010.5H3V13C3%2014.1046%203.89543%2015%205%2015H6V10.5ZM7%2010.5V15H15C16.1046%2015%2017%2014.1046%2017%2013V10.5H7ZM17%209.5V7C17%205.89543%2016.1046%205%2015%205H7V9.5H17Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --chevron-up: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.14708%2012.3544C3.95147%2012.1594%203.9509%2011.8429%204.14582%2011.6472L9.6108%206.16276C9.82574%205.94705%2010.1751%205.94705%2010.39%206.16276L15.855%2011.6472C16.0499%2011.8429%2016.0493%2012.1594%2015.8537%2012.3544C15.6581%2012.5493%2015.3415%2012.5487%2015.1466%2012.3531L10.0004%207.18851L4.85418%2012.3531C4.65927%2012.5487%204.34269%2012.5493%204.14708%2012.3544Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --chevron-next: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M15.8527%207.64582C16.0484%207.84073%2016.0489%208.15731%2015.854%208.35292L10.389%2013.8374C10.1741%2014.0531%209.82477%2014.0531%209.60982%2013.8374L4.14484%208.35292C3.94993%208.15731%203.95049%207.84073%204.1461%207.64582C4.34171%207.4509%204.65829%207.45147%204.85321%207.64708L9.99942%2012.8117L15.1456%207.64708C15.3406%207.45147%2015.6571%207.4509%2015.8527%207.64582Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --dismiss: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.08859%204.21569L4.14645%204.14645C4.32001%203.97288%204.58944%203.9536%204.78431%204.08859L4.85355%204.14645L10%209.293L15.1464%204.14645C15.32%203.97288%2015.5894%203.9536%2015.7843%204.08859L15.8536%204.14645C16.0271%204.32001%2016.0464%204.58944%2015.9114%204.78431L15.8536%204.85355L10.707%2010L15.8536%2015.1464C16.0271%2015.32%2016.0464%2015.5894%2015.9114%2015.7843L15.8536%2015.8536C15.68%2016.0271%2015.4106%2016.0464%2015.2157%2015.9114L15.1464%2015.8536L10%2010.707L4.85355%2015.8536C4.67999%2016.0271%204.41056%2016.0464%204.21569%2015.9114L4.14645%2015.8536C3.97288%2015.68%203.9536%2015.4106%204.08859%2015.2157L4.14645%2015.1464L9.293%2010L4.14645%204.85355C3.97288%204.67999%203.9536%204.41056%204.08859%204.21569L4.14645%204.14645L4.08859%204.21569Z%22%20fill%3D%22%23636566%22/%3E%0A%3C/svg%3E%0A"); --bookmark-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4%204.5C4%203.11929%205.11929%202%206.5%202H13.5C14.8807%202%2016%203.11929%2016%204.5V17.5C16%2017.6881%2015.8945%2017.8602%2015.7269%2017.9456C15.5593%2018.0309%2015.358%2018.015%2015.2059%2017.9044L10%2014.1183L4.79409%2017.9044C4.64199%2018.015%204.4407%2018.0309%204.27311%2017.9456C4.10553%2017.8602%204%2017.6881%204%2017.5V4.5Z%22%20fill%3D%22%23311b92%22/%3E%0A%3C/svg%3E%0A"); --chat-help-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M2.00001%2010C2.00001%205.58172%205.58173%202%2010%202C14.4183%202%2018%205.58172%2018%2010C18%2014.4183%2014.4183%2018%2010%2018C8.65078%2018%207.37829%2017.6656%206.26225%2017.0748L2.62128%2017.9851C2.45089%2018.0277%202.27065%2017.9777%202.14646%2017.8536C2.02227%2017.7294%201.97234%2017.5491%202.01494%2017.3787L2.92518%2013.7378C2.33442%2012.6217%202.00001%2011.3492%202.00001%2010ZM9.25027%207.30723C9.40317%207.13358%209.64031%207%2010%207C10.3597%207%2010.5968%207.13358%2010.7497%207.30723C10.9113%207.49072%2011%207.74463%2011%208C11%208.31707%2010.9286%208.52273%2010.8337%208.68547C10.7328%208.85858%2010.5985%208.99908%2010.4106%209.19559L10.3885%209.21878C10.2003%209.41576%209.96787%209.66319%209.79142%2010.0002C9.61017%2010.3464%209.5%2010.7611%209.5%2011.2929C9.5%2011.5691%209.72386%2011.7929%2010%2011.7929C10.2761%2011.7929%2010.5%2011.5691%2010.5%2011.2929C10.5%2010.9085%2010.5773%2010.6551%2010.6773%2010.4641C10.7821%2010.2639%2010.9247%2010.1051%2011.1115%209.90956L11.1528%209.86652C11.3225%209.68963%2011.5347%209.46855%2011.6976%209.18921C11.8839%208.86964%2012%208.48947%2012%208C12%207.52689%2011.8387%207.0308%2011.5003%206.64641C11.1532%206.25219%2010.6403%206%2010%206C9.35969%206%208.84683%206.25219%208.49973%206.64641C8.16129%207.0308%208%207.52689%208%208C8%208.27614%208.22386%208.5%208.5%208.5C8.77614%208.5%209%208.27614%209%208C9%207.74463%209.08871%207.49072%209.25027%207.30723ZM10.6995%2013.5126C10.6995%2013.1262%2010.3863%2012.813%209.99989%2012.813C9.61352%2012.813%209.30029%2013.1262%209.30029%2013.5126C9.30029%2013.899%209.61352%2014.2122%209.99989%2014.2122C10.3863%2014.2122%2010.6995%2013.899%2010.6995%2013.5126Z%22%20fill%3D%22%23880e4f%22/%3E%0A%3C/svg%3E%0A"); --star-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.10433%202.89874C9.47114%202.15549%2010.531%202.1555%2010.8978%202.89874L12.8282%206.81024L17.1448%207.43748C17.9651%207.55666%2018.2926%208.56464%2017.699%209.14317L14.5755%2012.1878L15.3129%2016.487C15.453%2017.3039%2014.5956%2017.9269%2013.8619%2017.5412L10.0011%2015.5114L6.14018%2017.5412C5.40655%2017.9269%204.54913%2017.3039%204.68924%2016.487L5.4266%2012.1878L2.30308%209.14317C1.70956%208.56463%202.03708%207.55666%202.8573%207.43748L7.17389%206.81024L9.10433%202.89874Z%22%20fill%3D%22%23044289%22/%3E%0A%3C/svg%3E%0A"); --warn-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M8.68569%202.85232L2.12696%2014.7773C1.57714%2015.777%202.30038%2017.0002%203.44129%2017.0002H16.5587C17.6996%2017.0002%2018.4229%2015.777%2017.8731%2014.7773L11.3143%202.85232C10.7444%201.81615%209.25558%201.81616%208.68569%202.85232ZM10%206.75016C10.4142%206.75016%2010.75%207.08595%2010.75%207.50016V11.5002C10.75%2011.9144%2010.4142%2012.2502%2010%2012.2502C9.58579%2012.2502%209.25%2011.9144%209.25%2011.5002V7.50016C9.25%207.08595%209.58579%206.75016%2010%206.75016ZM10.75%2013.7502C10.75%2014.1644%2010.4142%2014.5002%2010%2014.5002C9.58579%2014.5002%209.25%2014.1644%209.25%2013.7502C9.25%2013.3359%209.58579%2013.0002%2010%2013.0002C10.4142%2013.0002%2010.75%2013.3359%2010.75%2013.7502Z%22%20fill%3D%22%238a2a0d%22/%3E%0A%3C/svg%3E%0A"); --light-bulb-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M13.073%2015L12.6891%2016.6051C12.5048%2017.3763%2011.8236%2017.935%2011.0181%2017.9947L10.8748%2018H9.12546C8.30655%2018%207.59%2017.4839%207.34866%2016.7385L7.31108%2016.6047L6.928%2015H13.073Z%22%20fill%3D%22%23b0791b%22/%3E%0A%3Cpath%20d%3D%22M10%202C13.3137%202%2016%204.59693%2016%207.80041C16%209.47737%2015.2546%2011.0164%2013.7961%2012.3942C13.7324%2012.4544%2013.6831%2012.5269%2013.6512%2012.6065L13.6251%2012.6883L13.311%2014H10.5002V9.49707C10.5002%209.22093%2010.2764%208.99707%2010.0002%208.99707C9.7241%208.99707%209.50024%209.22093%209.50024%209.49707V14H6.689L6.37626%2012.6886C6.34955%2012.5766%206.29016%2012.4745%206.20516%2012.3942C4.8153%2011.0819%204.07265%209.62354%204.00507%208.03903L4%207.80041L4.00321%207.60894C4.1077%204.49409%206.75257%202%2010%202ZM9.5%206.50238V7.50391C9.5%207.78005%209.72386%208.00391%2010%208.00391C10.2761%208.00391%2010.5%207.78005%2010.5%207.50391V6.50238C10.5%206.22624%2010.2761%206.00238%2010%206.00238C9.72386%206.00238%209.5%206.22624%209.5%206.50238ZM12.8506%207.44332C12.6553%207.24806%2012.3388%207.24806%2012.1435%207.44332L11.4353%208.15151C11.2401%208.34677%2011.2401%208.66335%2011.4353%208.85861C11.6306%209.05388%2011.9472%209.05388%2012.1424%208.85861L12.8506%208.15043C13.0459%207.95517%2013.0459%207.63858%2012.8506%207.44332ZM7.8521%207.44332C7.65684%207.24806%207.34026%207.24806%207.145%207.44332C6.94973%207.63858%206.94973%207.95517%207.145%208.15043L7.85318%208.85861C8.04844%209.05388%208.36503%209.05388%208.56029%208.85861C8.75555%208.66335%208.75555%208.34677%208.56029%208.15151L7.8521%207.44332Z%22%20fill%3D%22%23b0791b%22/%3E%0A%3C/svg%3E%0A"); --note-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M14%203C15.5977%203%2016.9037%204.24892%2016.9949%205.82373L17%206V10H13L12.8237%2010.0051C11.3072%2010.093%2010.093%2011.3072%2010.0051%2012.8237L10%2013V17H6C4.40232%2017%203.09634%2015.7511%203.00509%2014.1763L3%2014V6C3%204.40232%204.24892%203.09634%205.82373%203.00509L6%203H14ZM16.9007%2011.001C16.8232%2011.2376%2016.7018%2011.459%2016.5416%2011.6528L16.4142%2011.7929L11.7929%2016.4142C11.5687%2016.6384%2011.2968%2016.8039%2011.001%2016.9007L11%2013L11.0055%2012.8507C11.078%2011.8676%2011.8612%2011.0821%2012.8433%2011.006L13%2011L16.9007%2011.001Z%22%20fill%3D%22%23004d40%22/%3E%0A%3C/svg%3E%0A"); --elevated-background: var(--color-scale-gray-0); --border: #f1f3f4; --icon-color: var(--text-color); --icon-filer: brightness(10); --title-color: #08090b; --monospace: var(--mono); --mark-border: none; --table-border: 1px solid var(--color-scale-gray-2)  !important; }
@media not all {
  :root { --title-color: #eff0f2; --bg-color: #131416; --text-color: #d0d3d4; --side-bar-bg-color: #030405; --control-text-color: #a0a0a0; --item-hover-bg-color: rgba(60, 61, 61, 0.59); --elevated-background: var(--color-scale-gray-9); --primary-color: #33373f; --accent-color: #33373f; --icon-color: var(--color-scale-gray-1); --icon-filer: brightness(10); --bookmark-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4%204.5C4%203.11929%205.11929%202%206.5%202H13.5C14.8807%202%2016%203.11929%2016%204.5V17.5C16%2017.6881%2015.8945%2017.8602%2015.7269%2017.9456C15.5593%2018.0309%2015.358%2018.015%2015.2059%2017.9044L10%2014.1183L4.79409%2017.9044C4.64199%2018.015%204.4407%2018.0309%204.27311%2017.9456C4.10553%2017.8602%204%2017.6881%204%2017.5V4.5Z%22%20fill%3D%22%23ae92e3%22/%3E%0A%3C/svg%3E%0A"); --chat-help-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M2.00001%2010C2.00001%205.58172%205.58173%202%2010%202C14.4183%202%2018%205.58172%2018%2010C18%2014.4183%2014.4183%2018%2010%2018C8.65078%2018%207.37829%2017.6656%206.26225%2017.0748L2.62128%2017.9851C2.45089%2018.0277%202.27065%2017.9777%202.14646%2017.8536C2.02227%2017.7294%201.97234%2017.5491%202.01494%2017.3787L2.92518%2013.7378C2.33442%2012.6217%202.00001%2011.3492%202.00001%2010ZM9.25027%207.30723C9.40317%207.13358%209.64031%207%2010%207C10.3597%207%2010.5968%207.13358%2010.7497%207.30723C10.9113%207.49072%2011%207.74463%2011%208C11%208.31707%2010.9286%208.52273%2010.8337%208.68547C10.7328%208.85858%2010.5985%208.99908%2010.4106%209.19559L10.3885%209.21878C10.2003%209.41576%209.96787%209.66319%209.79142%2010.0002C9.61017%2010.3464%209.5%2010.7611%209.5%2011.2929C9.5%2011.5691%209.72386%2011.7929%2010%2011.7929C10.2761%2011.7929%2010.5%2011.5691%2010.5%2011.2929C10.5%2010.9085%2010.5773%2010.6551%2010.6773%2010.4641C10.7821%2010.2639%2010.9247%2010.1051%2011.1115%209.90956L11.1528%209.86652C11.3225%209.68963%2011.5347%209.46855%2011.6976%209.18921C11.8839%208.86964%2012%208.48947%2012%208C12%207.52689%2011.8387%207.0308%2011.5003%206.64641C11.1532%206.25219%2010.6403%206%2010%206C9.35969%206%208.84683%206.25219%208.49973%206.64641C8.16129%207.0308%208%207.52689%208%208C8%208.27614%208.22386%208.5%208.5%208.5C8.77614%208.5%209%208.27614%209%208C9%207.74463%209.08871%207.49072%209.25027%207.30723ZM10.6995%2013.5126C10.6995%2013.1262%2010.3863%2012.813%209.99989%2012.813C9.61352%2012.813%209.30029%2013.1262%209.30029%2013.5126C9.30029%2013.899%209.61352%2014.2122%209.99989%2014.2122C10.3863%2014.2122%2010.6995%2013.899%2010.6995%2013.5126Z%22%20fill%3D%22%23f8bbd0%22/%3E%0A%3C/svg%3E%0A"); --star-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.10433%202.89874C9.47114%202.15549%2010.531%202.1555%2010.8978%202.89874L12.8282%206.81024L17.1448%207.43748C17.9651%207.55666%2018.2926%208.56464%2017.699%209.14317L14.5755%2012.1878L15.3129%2016.487C15.453%2017.3039%2014.5956%2017.9269%2013.8619%2017.5412L10.0011%2015.5114L6.14018%2017.5412C5.40655%2017.9269%204.54913%2017.3039%204.68924%2016.487L5.4266%2012.1878L2.30308%209.14317C1.70956%208.56463%202.03708%207.55666%202.8573%207.43748L7.17389%206.81024L9.10433%202.89874Z%22%20fill%3D%22%23c8e1ff%22/%3E%0A%3C/svg%3E%0A"); --warn-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M8.68569%202.85232L2.12696%2014.7773C1.57714%2015.777%202.30038%2017.0002%203.44129%2017.0002H16.5587C17.6996%2017.0002%2018.4229%2015.777%2017.8731%2014.7773L11.3143%202.85232C10.7444%201.81615%209.25558%201.81616%208.68569%202.85232ZM10%206.75016C10.4142%206.75016%2010.75%207.08595%2010.75%207.50016V11.5002C10.75%2011.9144%2010.4142%2012.2502%2010%2012.2502C9.58579%2012.2502%209.25%2011.9144%209.25%2011.5002V7.50016C9.25%207.08595%209.58579%206.75016%2010%206.75016ZM10.75%2013.7502C10.75%2014.1644%2010.4142%2014.5002%2010%2014.5002C9.58579%2014.5002%209.25%2014.1644%209.25%2013.7502C9.25%2013.3359%209.58579%2013.0002%2010%2013.0002C10.4142%2013.0002%2010.75%2013.3359%2010.75%2013.7502Z%22%20fill%3D%22%23e69d94%22/%3E%0A%3C/svg%3E%0A"); --light-bulb-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M13.073%2015L12.6891%2016.6051C12.5048%2017.3763%2011.8236%2017.935%2011.0181%2017.9947L10.8748%2018H9.12546C8.30655%2018%207.59%2017.4839%207.34866%2016.7385L7.31108%2016.6047L6.928%2015H13.073Z%22%20fill%3D%22%23fff9c4%22/%3E%0A%3Cpath%20d%3D%22M10%202C13.3137%202%2016%204.59693%2016%207.80041C16%209.47737%2015.2546%2011.0164%2013.7961%2012.3942C13.7324%2012.4544%2013.6831%2012.5269%2013.6512%2012.6065L13.6251%2012.6883L13.311%2014H10.5002V9.49707C10.5002%209.22093%2010.2764%208.99707%2010.0002%208.99707C9.7241%208.99707%209.50024%209.22093%209.50024%209.49707V14H6.689L6.37626%2012.6886C6.34955%2012.5766%206.29016%2012.4745%206.20516%2012.3942C4.8153%2011.0819%204.07265%209.62354%204.00507%208.03903L4%207.80041L4.00321%207.60894C4.1077%204.49409%206.75257%202%2010%202ZM9.5%206.50238V7.50391C9.5%207.78005%209.72386%208.00391%2010%208.00391C10.2761%208.00391%2010.5%207.78005%2010.5%207.50391V6.50238C10.5%206.22624%2010.2761%206.00238%2010%206.00238C9.72386%206.00238%209.5%206.22624%209.5%206.50238ZM12.8506%207.44332C12.6553%207.24806%2012.3388%207.24806%2012.1435%207.44332L11.4353%208.15151C11.2401%208.34677%2011.2401%208.66335%2011.4353%208.85861C11.6306%209.05388%2011.9472%209.05388%2012.1424%208.85861L12.8506%208.15043C13.0459%207.95517%2013.0459%207.63858%2012.8506%207.44332ZM7.8521%207.44332C7.65684%207.24806%207.34026%207.24806%207.145%207.44332C6.94973%207.63858%206.94973%207.95517%207.145%208.15043L7.85318%208.85861C8.04844%209.05388%208.36503%209.05388%208.56029%208.85861C8.75555%208.66335%208.75555%208.34677%208.56029%208.15151L7.8521%207.44332Z%22%20fill%3D%22%23fff9c4%22/%3E%0A%3C/svg%3E%0A"); --note-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M14%203C15.5977%203%2016.9037%204.24892%2016.9949%205.82373L17%206V10H13L12.8237%2010.0051C11.3072%2010.093%2010.093%2011.3072%2010.0051%2012.8237L10%2013V17H6C4.40232%2017%203.09634%2015.7511%203.00509%2014.1763L3%2014V6C3%204.40232%204.24892%203.09634%205.82373%203.00509L6%203H14ZM16.9007%2011.001C16.8232%2011.2376%2016.7018%2011.459%2016.5416%2011.6528L16.4142%2011.7929L11.7929%2016.4142C11.5687%2016.6384%2011.2968%2016.8039%2011.001%2016.9007L11%2013L11.0055%2012.8507C11.078%2011.8676%2011.8612%2011.0821%2012.8433%2011.006L13%2011L16.9007%2011.001Z%22%20fill%3D%22%238be3d6%22/%3E%0A%3C/svg%3E%0A"); --checkbox-filled: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M18%203C19.6569%203%2021%204.34315%2021%206V18C21%2019.6569%2019.6569%2021%2018%2021H6C4.34315%2021%203%2019.6569%203%2018V6C3%204.34315%204.34315%203%206%203H18ZM16.4697%207.96967L10%2014.4393L7.53033%2011.9697C7.23744%2011.6768%206.76256%2011.6768%206.46967%2011.9697C6.17678%2012.2626%206.17678%2012.7374%206.46967%2013.0303L9.46967%2016.0303C9.76256%2016.3232%2010.2374%2016.3232%2010.5303%2016.0303L17.5303%209.03033C17.8232%208.73744%2017.8232%208.26256%2017.5303%207.96967C17.2374%207.67678%2016.7626%207.67678%2016.4697%207.96967Z%22%20fill%3D%22%23d0d3d4%22/%3E%0A%3C/svg%3E%0A"); --dots: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M10%206C9.30964%206%208.75%205.44036%208.75%204.75C8.75%204.05964%209.30964%203.5%2010%203.5C10.6904%203.5%2011.25%204.05964%2011.25%204.75C11.25%205.44036%2010.6904%206%2010%206Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3Cpath%20d%3D%22M10%2011.25C9.30964%2011.25%208.75%2010.6904%208.75%2010C8.75%209.30964%209.30964%208.75%2010%208.75C10.6904%208.75%2011.25%209.30964%2011.25%2010C11.25%2010.6904%2010.6904%2011.25%2010%2011.25Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3Cpath%20d%3D%22M8.75%2015.25C8.75%2015.9404%209.30964%2016.5%2010%2016.5C10.6904%2016.5%2011.25%2015.9404%2011.25%2015.25C11.25%2014.5596%2010.6904%2014%2010%2014C9.30964%2014%208.75%2014.5596%208.75%2015.25Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --cells: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.5%2011C8.32843%2011%209%2011.6716%209%2012.5V16.5C9%2017.3284%208.32843%2018%207.5%2018H3.5C2.67157%2018%202%2017.3284%202%2016.5V12.5C2%2011.6716%202.67157%2011%203.5%2011H7.5ZM16.5%2011C17.3284%2011%2018%2011.6716%2018%2012.5V16.5C18%2017.3284%2017.3284%2018%2016.5%2018H12.5C11.6716%2018%2011%2017.3284%2011%2016.5V12.5C11%2011.6716%2011.6716%2011%2012.5%2011H16.5ZM7.5%2012H3.5C3.22386%2012%203%2012.2239%203%2012.5V16.5C3%2016.7761%203.22386%2017%203.5%2017H7.5C7.77614%2017%208%2016.7761%208%2016.5V12.5C8%2012.2239%207.77614%2012%207.5%2012ZM16.5%2012H12.5C12.2239%2012%2012%2012.2239%2012%2012.5V16.5C12%2016.7761%2012.2239%2017%2012.5%2017H16.5C16.7761%2017%2017%2016.7761%2017%2016.5V12.5C17%2012.2239%2016.7761%2012%2016.5%2012ZM7.5%202C8.32843%202%209%202.67157%209%203.5V7.5C9%208.32843%208.32843%209%207.5%209H3.5C2.67157%209%202%208.32843%202%207.5V3.5C2%202.67157%202.67157%202%203.5%202H7.5ZM16.5%202C17.3284%202%2018%202.67157%2018%203.5V7.5C18%208.32843%2017.3284%209%2016.5%209H12.5C11.6716%209%2011%208.32843%2011%207.5V3.5C11%202.67157%2011.6716%202%2012.5%202H16.5ZM7.5%203H3.5C3.22386%203%203%203.22386%203%203.5V7.5C3%207.77614%203.22386%208%203.5%208H7.5C7.77614%208%208%207.77614%208%207.5V3.5C8%203.22386%207.77614%203%207.5%203ZM16.5%203H12.5C12.2239%203%2012%203.22386%2012%203.5V7.5C12%207.77614%2012.2239%208%2012.5%208H16.5C16.7761%208%2017%207.77614%2017%207.5V3.5C17%203.22386%2016.7761%203%2016.5%203Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --add: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.5%2016.5C9.5%2016.7761%209.72386%2017%2010%2017C10.2761%2017%2010.5%2016.7761%2010.5%2016.5V10.5H16.5C16.7761%2010.5%2017%2010.2761%2017%2010C17%209.72386%2016.7761%209.5%2016.5%209.5H10.5V3.5C10.5%203.22386%2010.2761%203%2010%203C9.72386%203%209.5%203.22386%209.5%203.5V9.5H3.5C3.22386%209.5%203%209.72386%203%2010C3%2010.2761%203.22386%2010.5%203.5%2010.5H9.5V16.5Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --chevron-right: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.46967%202.21967C4.17678%202.51256%204.17678%202.98744%204.46967%203.28033L7.18934%206L4.46967%208.71967C4.17678%209.01256%204.17678%209.48744%204.46967%209.78033C4.76256%2010.0732%205.23744%2010.0732%205.53033%209.78033L8.78033%206.53033C9.07322%206.23744%209.07322%205.76256%208.78033%205.46967L5.53033%202.21967C5.23744%201.92678%204.76256%201.92678%204.46967%202.21967Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --chevron-down: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2012%2012%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M2.21967%204.46967C2.51256%204.17678%202.98744%204.17678%203.28033%204.46967L6%207.18934L8.71967%204.46967C9.01256%204.17678%209.48744%204.17678%209.78033%204.46967C10.0732%204.76256%2010.0732%205.23744%209.78033%205.53033L6.53033%208.78033C6.23744%209.07322%205.76256%209.07322%205.46967%208.78033L2.21967%205.53033C1.92678%205.23744%201.92678%204.76256%202.21967%204.46967Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --document: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.5%207C7.22386%207%207%207.22386%207%207.5C7%207.77614%207.22386%208%207.5%208H12.5C12.7761%208%2013%207.77614%2013%207.5C13%207.22386%2012.7761%207%2012.5%207H7.5Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3Cpath%20d%3D%22M7%2010.5C7%2010.2239%207.22386%2010%207.5%2010H12.5C12.7761%2010%2013%2010.2239%2013%2010.5C13%2010.7761%2012.7761%2011%2012.5%2011H7.5C7.22386%2011%207%2010.7761%207%2010.5Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3Cpath%20d%3D%22M7.5%2013C7.22386%2013%207%2013.2239%207%2013.5C7%2013.7761%207.22386%2014%207.5%2014H9.5C9.77614%2014%2010%2013.7761%2010%2013.5C10%2013.2239%209.77614%2013%209.5%2013H7.5Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3Cpath%20d%3D%22M6.5%202C6.22386%202%206%202.22386%206%202.5V3H5.5C4.67157%203%204%203.67157%204%204.5V16.5C4%2017.3284%204.67157%2018%205.5%2018H11.5C11.6326%2018%2011.7598%2017.9473%2011.8536%2017.8536L15.8536%2013.8536C15.9473%2013.7598%2016%2013.6326%2016%2013.5V4.5C16%203.67157%2015.3284%203%2014.5%203H14V2.5C14%202.22386%2013.7761%202%2013.5%202C13.2239%202%2013%202.22386%2013%202.5V3H10.5V2.5C10.5%202.22386%2010.2761%202%2010%202C9.72386%202%209.5%202.22386%209.5%202.5V3H7V2.5C7%202.22386%206.77614%202%206.5%202ZM14.5%204C14.7761%204%2015%204.22386%2015%204.5V13H12.5C11.6716%2013%2011%2013.6716%2011%2014.5V17H5.5C5.22386%2017%205%2016.7761%205%2016.5V4.5C5%204.22386%205.22386%204%205.5%204H14.5ZM14.2929%2014L12%2016.2929V14.5C12%2014.2239%2012.2239%2014%2012.5%2014H14.2929Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --folder: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M7.16667%203C7.43713%203%207.70151%203.0731%207.93238%203.21016L8.06667%203.3L9.667%204.5H15.5C16.7703%204.5%2017.8192%205.44737%2017.9789%206.67409L17.9947%206.83562L18%207V14.5C18%2015.8255%2016.9685%2016.91%2015.6644%2016.9947L15.5%2017H4.5C3.17452%2017%202.08996%2015.9685%202.00532%2014.6644L2%2014.5V5.5C2%204.17452%203.03154%203.08996%204.33562%203.00532L4.5%203H7.16667ZM8.15763%207.03449C7.90991%207.2946%207.57838%207.45592%207.22435%207.49219L7.07143%207.5L3%207.499V14.5C3%2015.2797%203.59489%2015.9204%204.35554%2015.9931L4.5%2016H15.5C16.2797%2016%2016.9204%2015.4051%2016.9931%2014.6445L17%2014.5V7C17%206.2203%2016.4051%205.57955%2015.6445%205.50687L15.5%205.5H9.617L8.15763%207.03449ZM7.16667%204H4.5C3.7203%204%203.07955%204.59489%203.00687%205.35554L3%205.5V6.499L7.07143%206.5C7.1809%206.5%207.28655%206.46411%207.37274%206.39902L7.4335%206.34483L8.694%205.021L7.46667%204.1C7.40176%204.05132%207.32632%204.01941%207.24701%204.0065L7.16667%204Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --navigation: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M3%206.5C3.55228%206.5%204%206.05228%204%205.5C4%204.94772%203.55228%204.5%203%204.5C2.44772%204.5%202%204.94772%202%205.5C2%206.05228%202.44772%206.5%203%206.5ZM6%205.5C6%205.22386%206.22386%205%206.5%205H17.5C17.7761%205%2018%205.22386%2018%205.5C18%205.77614%2017.7761%206%2017.5%206H6.5C6.22386%206%206%205.77614%206%205.5ZM6%209.5C6%209.22386%206.22386%209%206.5%209H17.5C17.7761%209%2018%209.22386%2018%209.5C18%209.77614%2017.7761%2010%2017.5%2010H6.5C6.22386%2010%206%209.77614%206%209.5ZM6.5%2013C6.22386%2013%206%2013.2239%206%2013.5C6%2013.7761%206.22386%2014%206.5%2014H17.5C17.7761%2014%2018%2013.7761%2018%2013.5C18%2013.2239%2017.7761%2013%2017.5%2013H6.5ZM4%2013.5C4%2014.0523%203.55228%2014.5%203%2014.5C2.44772%2014.5%202%2014.0523%202%2013.5C2%2012.9477%202.44772%2012.5%203%2012.5C3.55228%2012.5%204%2012.9477%204%2013.5ZM3%2010.5C3.55228%2010.5%204%2010.0523%204%209.5C4%208.94772%203.55228%208.5%203%208.5C2.44772%208.5%202%208.94772%202%209.5C2%2010.0523%202.44772%2010.5%203%2010.5Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --tree: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9%205C9%203.34315%207.65685%202%206%202C4.34315%202%203%203.34315%203%205C3%206.4865%204.08114%207.72048%205.5%207.95852V12.0415C4.08114%2012.2795%203%2013.5135%203%2015C3%2016.6569%204.34315%2018%206%2018C7.65685%2018%209%2016.6569%209%2015C9%2013.5135%207.91886%2012.2795%206.5%2012.0415V11H12C13.3807%2011%2014.5%209.88071%2014.5%208.5V7.95852C15.9189%207.72048%2017%206.4865%2017%205C17%203.34315%2015.6569%202%2014%202C12.3431%202%2011%203.34315%2011%205C11%206.4865%2012.0811%207.72048%2013.5%207.95852V8.5C13.5%209.32843%2012.8284%2010%2012%2010H6.5V7.95852C7.91886%207.72048%209%206.4865%209%205ZM6%207C4.89543%207%204%206.10457%204%205C4%203.89543%204.89543%203%206%203C7.10457%203%208%203.89543%208%205C8%206.10457%207.10457%207%206%207ZM6%2017C4.89543%2017%204%2016.1046%204%2015C4%2013.8954%204.89543%2013%206%2013C7.10457%2013%208%2013.8954%208%2015C8%2016.1046%207.10457%2017%206%2017ZM16%205C16%206.10457%2015.1046%207%2014%207C12.8954%207%2012%206.10457%2012%205C12%203.89543%2012.8954%203%2014%203C15.1046%203%2016%203.89543%2016%205Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --search: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M8.5%203C11.5376%203%2014%205.46243%2014%208.5C14%209.83879%2013.5217%2011.0659%2012.7266%2012.0196L16.8536%2016.1464C17.0488%2016.3417%2017.0488%2016.6583%2016.8536%2016.8536C16.68%2017.0271%2016.4106%2017.0464%2016.2157%2016.9114L16.1464%2016.8536L12.0196%2012.7266C11.0659%2013.5217%209.83879%2014%208.5%2014C5.46243%2014%203%2011.5376%203%208.5C3%205.46243%205.46243%203%208.5%203ZM8.5%204C6.01472%204%204%206.01472%204%208.5C4%2010.9853%206.01472%2013%208.5%2013C10.9853%2013%2013%2010.9853%2013%208.5C13%206.01472%2010.9853%204%208.5%204Z%22%20fill%3D%22%23a0a0a0%22/%3E%0A%3C/svg%3E%0A"); --checkbox-checked: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M18.25%203C19.7688%203%2021%204.23122%2021%205.75V18.25C21%2019.7688%2019.7688%2021%2018.25%2021H5.75C4.23122%2021%203%2019.7688%203%2018.25V5.75C3%204.23122%204.23122%203%205.75%203H18.25ZM18.25%204.5H5.75C5.05964%204.5%204.5%205.05964%204.5%205.75V18.25C4.5%2018.9404%205.05964%2019.5%205.75%2019.5H18.25C18.9404%2019.5%2019.5%2018.9404%2019.5%2018.25V5.75C19.5%205.05964%2018.9404%204.5%2018.25%204.5ZM10%2014.4393L16.4697%207.96967C16.7626%207.67678%2017.2374%207.67678%2017.5303%207.96967C17.7966%208.23594%2017.8208%208.6526%2017.6029%208.94621L17.5303%209.03033L10.5303%2016.0303C10.2641%2016.2966%209.8474%2016.3208%209.55379%2016.1029L9.46967%2016.0303L6.46967%2013.0303C6.17678%2012.7374%206.17678%2012.2626%206.46967%2011.9697C6.73594%2011.7034%207.1526%2011.6792%207.44621%2011.8971L7.53033%2011.9697L10%2014.4393L16.4697%207.96967L10%2014.4393Z%22%20fill%3D%22%23f0f0f0%22/%3E%0A%3C/svg%3E%0A"); --checkbox-unchecked: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M5.75%203H18.25C19.7688%203%2021%204.23122%2021%205.75V18.25C21%2019.7688%2019.7688%2021%2018.25%2021H5.75C4.23122%2021%203%2019.7688%203%2018.25V5.75C3%204.23122%204.23122%203%205.75%203ZM5.75%204.5C5.05964%204.5%204.5%205.05964%204.5%205.75V18.25C4.5%2018.9404%205.05964%2019.5%205.75%2019.5H18.25C18.9404%2019.5%2019.5%2018.9404%2019.5%2018.25V5.75C19.5%205.05964%2018.9404%204.5%2018.25%204.5H5.75Z%22%20fill%3D%22%23f0f0f0%22/%3E%0A%3C/svg%3E%0A"); --case: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M13.4911%203.50005C13.7013%203.50299%2013.8873%203.63714%2013.9563%203.83574L17.6085%2014.3357C17.6992%2014.5966%2017.5613%2014.8815%2017.3005%2014.9722C17.0397%2015.063%2016.7547%2014.9251%2016.664%2014.6643L15.7373%2012L10.9833%2012L9.96737%2014.6774C9.8694%2014.9356%209.58069%2015.0654%209.32251%2014.9675C9.06433%2014.8695%208.93445%2014.5808%209.03241%2014.3226L10.2727%2011.0539V11H10.2932L13.0166%203.82262C13.0912%203.62603%2013.2808%203.49711%2013.4911%203.50005ZM13.4636%205.46323L11.3627%2011L15.3895%2011L13.4636%205.46323Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M5.6667%208.70091L5.85817%208.70749C7.16522%208.77248%207.94311%209.52482%207.997%2010.737L8%2010.8735V14.5402C8%2014.7933%207.8119%2015.0025%207.56785%2015.0356L7.5%2015.0402C7.24687%2015.0402%207.03767%2014.8521%207.00456%2014.6081L7%2014.5402L6.9991%2014.4706C6.34072%2014.8475%205.7317%2015.0402%205.16667%2015.0402C3.94105%2015.0402%203%2014.1772%203%2012.8735C3%2011.724%203.79229%2010.8699%205.10646%2010.7105C5.728%2010.6351%206.35968%2010.6823%206.99902%2010.8503C6.99247%2010.1122%206.62837%209.74702%205.8085%209.70625C5.16701%209.67435%204.7162%209.76443%204.45216%209.94958C4.22607%2010.1081%203.91426%2010.0534%203.75572%209.82728C3.59717%209.60118%203.65193%209.28937%203.87802%209.13083C4.31656%208.8233%204.91381%208.68705%205.6667%208.70091ZM6.99933%2011.916L6.79742%2011.8558C6.25917%2011.7078%205.73655%2011.6657%205.22687%2011.7275C4.40527%2011.8271%204%2012.264%204%2012.8978C4%2013.6289%204.47493%2014.0644%205.16667%2014.0644C5.62021%2014.0644%206.17899%2013.8549%206.83419%2013.422L6.99933%2013.3094V11.916Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --arrowleft: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.16289%2016.8692C9.36683%2017.0555%209.68308%2017.0411%209.86926%2016.8371C10.0554%2016.6331%2010.041%2016.3168%209.83711%2016.1306L3.66925%2010.4988L17.5%2010.4988C17.7761%2010.4988%2018%2010.2749%2018%209.99868C18%209.72249%2017.7761%209.49859%2017.5%209.49859L3.67214%209.49859L9.83711%203.86943C10.041%203.68322%2010.0554%203.3669%209.86926%203.16293C9.68308%202.95895%209.36683%202.94455%209.16289%203.13076L2.24654%209.446C2.10659%209.57378%202.02676%209.74135%202.00705%209.91453C2.00241%209.94189%202%209.97%202%209.99868C2%2010.0256%202.00212%2010.0519%202.0062%2010.0777C2.02437%2010.2536%202.10449%2010.4243%202.24654%2010.554L9.16289%2016.8692Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --match: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M9.5%2012.75C9.5%2013.1642%209.16421%2013.5%208.75%2013.5C8.33579%2013.5%208%2013.1642%208%2012.75C8%2012.3358%208.33579%2012%208.75%2012C9.16421%2012%209.5%2012.3358%209.5%2012.75Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M11.75%2012.75C11.75%2013.1642%2011.4142%2013.5%2011%2013.5C10.5858%2013.5%2010.25%2013.1642%2010.25%2012.75C10.25%2012.3358%2010.5858%2012%2011%2012C11.4142%2012%2011.75%2012.3358%2011.75%2012.75Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M14%2012.75C14%2013.1642%2013.6642%2013.5%2013.25%2013.5C12.8358%2013.5%2012.5%2013.1642%2012.5%2012.75C12.5%2012.3358%2012.8358%2012%2013.25%2012C13.6642%2012%2014%2012.3358%2014%2012.75Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M16.25%2012.75C16.25%2013.1642%2015.9142%2013.5%2015.5%2013.5C15.0858%2013.5%2014.75%2013.1642%2014.75%2012.75C14.75%2012.3358%2015.0858%2012%2015.5%2012C15.9142%2012%2016.25%2012.3358%2016.25%2012.75Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M8.75%208C9.16421%208%209.5%207.66421%209.5%207.25C9.5%206.83579%209.16421%206.5%208.75%206.5C8.33579%206.5%208%206.83579%208%207.25C8%207.66421%208.33579%208%208.75%208Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M11%208C11.4142%208%2011.75%207.66421%2011.75%207.25C11.75%206.83579%2011.4142%206.5%2011%206.5C10.5858%206.5%2010.25%206.83579%2010.25%207.25C10.25%207.66421%2010.5858%208%2011%208Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M13.25%208C13.6642%208%2014%207.66421%2014%207.25C14%206.83579%2013.6642%206.5%2013.25%206.5C12.8358%206.5%2012.5%206.83579%2012.5%207.25C12.5%207.66421%2012.8358%208%2013.25%208Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M15.5%208C15.9142%208%2016.25%207.66421%2016.25%207.25C16.25%206.83579%2015.9142%206.5%2015.5%206.5C15.0858%206.5%2014.75%206.83579%2014.75%207.25C14.75%207.66421%2015.0858%208%2015.5%208Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3Cpath%20d%3D%22M2%207C2%205.34315%203.34315%204%205%204H15C16.6569%204%2018%205.34315%2018%207V13C18%2014.6569%2016.6569%2016%2015%2016H5C3.34315%2016%202%2014.6569%202%2013V7ZM5%205C3.89543%205%203%205.89543%203%207V9.5H6V5H5ZM6%2010.5H3V13C3%2014.1046%203.89543%2015%205%2015H6V10.5ZM7%2010.5V15H15C16.1046%2015%2017%2014.1046%2017%2013V10.5H7ZM17%209.5V7C17%205.89543%2016.1046%205%2015%205H7V9.5H17Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --chevron-up: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.14708%2012.3544C3.95147%2012.1594%203.9509%2011.8429%204.14582%2011.6472L9.6108%206.16276C9.82574%205.94705%2010.1751%205.94705%2010.39%206.16276L15.855%2011.6472C16.0499%2011.8429%2016.0493%2012.1594%2015.8537%2012.3544C15.6581%2012.5493%2015.3415%2012.5487%2015.1466%2012.3531L10.0004%207.18851L4.85418%2012.3531C4.65927%2012.5487%204.34269%2012.5493%204.14708%2012.3544Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --chevron-next: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M15.8527%207.64582C16.0484%207.84073%2016.0489%208.15731%2015.854%208.35292L10.389%2013.8374C10.1741%2014.0531%209.82477%2014.0531%209.60982%2013.8374L4.14484%208.35292C3.94993%208.15731%203.95049%207.84073%204.1461%207.64582C4.34171%207.4509%204.65829%207.45147%204.85321%207.64708L9.99942%2012.8117L15.1456%207.64708C15.3406%207.45147%2015.6571%207.4509%2015.8527%207.64582Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --dismiss: url("data:image/svg+xml;utf8,%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20viewBox%3D%220%200%2020%2020%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%0A%3Cpath%20d%3D%22M4.08859%204.21569L4.14645%204.14645C4.32001%203.97288%204.58944%203.9536%204.78431%204.08859L4.85355%204.14645L10%209.293L15.1464%204.14645C15.32%203.97288%2015.5894%203.9536%2015.7843%204.08859L15.8536%204.14645C16.0271%204.32001%2016.0464%204.58944%2015.9114%204.78431L15.8536%204.85355L10.707%2010L15.8536%2015.1464C16.0271%2015.32%2016.0464%2015.5894%2015.9114%2015.7843L15.8536%2015.8536C15.68%2016.0271%2015.4106%2016.0464%2015.2157%2015.9114L15.1464%2015.8536L10%2010.707L4.85355%2015.8536C4.67999%2016.0271%204.41056%2016.0464%204.21569%2015.9114L4.14645%2015.8536C3.97288%2015.68%203.9536%2015.4106%204.08859%2015.2157L4.14645%2015.1464L9.293%2010L4.14645%204.85355C3.97288%204.67999%203.9536%204.41056%204.08859%204.21569L4.14645%204.14645L4.08859%204.21569Z%22%20fill%3D%22%23a3a7a8%22/%3E%0A%3C/svg%3E%0A"); --color-cm-keyword: #a8cdf4; --color-cm-attr: #dea8e7; --color-cm-comment: #92989e; --color-cm-string: #8ce7b9; --color-cm-operator: #f1a5c1; --color-cm-number: #f1a5c1; --color-cm-meta: #bfa3e4; --color-cm-builtin: #e7bc9f; --color-cm-link: #9edae9; --color-cm-v3: #bafdf7; --mark-bg: #ffde6720; --mark-text: #ffe790; --text-link: #7492ff; --color-cm-v: #f2c08b; --border: #393b3b; --question-color: #f8bbd0; --alert-color: #e69d94; --note-color: #8be3d6; --lightbulb-color: #fff9c4; --bookmark-color: #ae92e3; --star-color: var(--color-scale-blue-2); --table-border: 1px solid var(--color-scale-gray-7)  !important; }
}
:root { --mono: var(--mono-font), var(--cjk-font); --general-font: quote1, quote2, quote3, var(--text-font), var(--cjk-font), var(--fallback-font); --display-font: quote1, quote2, quote3, var(--title-font), var(--cjk-font), var(--fallback-font); }
html { font-size: 16px; }
body, .file-list-item-summary { font-family: var(--general-font); font-feature-settings: var(--general-font-feature-settings); color: var(--text-color); line-height: 1.6; }
#write { max-width: 860px; margin: 0px auto; padding: 30px 30px 100px; }
@media only screen and (min-width: 1400px) {
  #write { max-width: 1024px; }
}
@media only screen and (min-width: 1800px) {
  #write { max-width: 1200px; }
}
#write > ul:first-child, #write > ol:first-child { margin-top: 30px; }
h1, h2, h3, h4, h5, h6 { position: relative; margin-top: 1rem; margin-bottom: 1rem; font-weight: bold; line-height: 1.4; cursor: text; font-family: var(--display-font) !important; }
h1, h2, h3, h4 { color: var(--title-color); letter-spacing: -0.04rem; }
h6 { margin-top: 0.6rem; margin-bottom: 0.2rem; }
h1:hover a.anchor, h2:hover a.anchor, h3:hover a.anchor, h4:hover a.anchor, h5:hover a.anchor, h6:hover a.anchor { text-decoration: none; }
h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code { font-size: inherit; }
h1 { font-size: 2.25em; line-height: 1.2; }
h2 { font-size: 1.75em; line-height: 1.225; }
h3 { font-size: 1.5em; line-height: 1.43; }
h4 { font-size: 1.25em; }
h5 { font-size: 1em; }
h6 { font-size: 1em; color: rgb(119, 119, 119); }
p, blockquote, ul, ol, dl, table { margin: 0.8em 0px; }
li > ol, li > ul { margin: 0px; }
h1 code, h2 code, h3 code, h4 code, h5 code, h6 code { border: inherit; background-color: inherit; }
hr { height: 2px; padding: 0px; margin: 16px 0px; background-color: rgb(231, 231, 231); border: 0px none; overflow: hidden; box-sizing: content-box; }
li p.first { display: inline-block; }
ul, ol { padding-left: 30px; }
ul:first-child, ol:first-child { margin-top: 0px; }
ul:last-child, ol:last-child { margin-bottom: 0px; }
blockquote { color: var(--text-color); border: 1px solid var(--border); background-color: var(--elevated-background); border-radius: 4px; padding: 12px 16px; overflow: hidden; box-sizing: border-box; }
blockquote blockquote { padding-right: 0px; }
table { padding: 0px; word-break: initial; }
table tr { border: 1px solid rgb(223, 226, 229); margin: 0px; padding: 0px; }
table tr:nth-child(2n), thead { background-color: rgb(248, 248, 248); }
table th { font-weight: bold; border-width: 1px 1px 0px; border-top-style: solid; border-right-style: solid; border-left-style: solid; border-top-color: rgb(223, 226, 229); border-right-color: rgb(223, 226, 229); border-left-color: rgb(223, 226, 229); border-image: initial; border-bottom-style: initial; border-bottom-color: initial; margin: 0px; padding: 6px 13px; }
table td { border: 1px solid rgb(223, 226, 229); margin: 0px; padding: 6px 13px; }
table th:first-child, table td:first-child { margin-top: 0px; }
table th:last-child, table td:last-child { margin-bottom: 0px; }
.CodeMirror-lines { padding-left: 4px; }
.code-tooltip { border: 1px solid var(--border); background-color: var(--elevated-background); border-radius: 4px; font-family: var(--general-font); box-shadow: none !important; }
.md-fences, code, tt { color: var(--text-color); border: 1px solid var(--border); background-color: var(--elevated-background); border-radius: 4px; padding: 2px 4px 0px; font-size: 0.9em; font-family: var(--mono); font-variant-ligatures: common-ligatures !important; font-feature-settings: "liga" !important; }
code { background-color: var(--elevated-background); padding: 0px 2px; }
.md-fences { margin-bottom: 15px; margin-top: 15px; padding-top: 8px; padding-bottom: 6px; }
.md-task-list-item > input { margin-left: -1.3em; }
@media print {
  html { font-size: 13px; }
  table, pre { break-inside: avoid; }
  pre { overflow-wrap: break-word; }
  input[type="checkbox"] { margin-top: -1px !important; }
}
#write pre.md-meta-block { padding: 1rem; font-size: 85%; line-height: 1.45; background-color: var(--elevated-background); border: 0px; border-radius: 4px; color: rgb(119, 119, 119); margin-top: 0px !important; }
.mathjax-block > .code-tooltip { bottom: 0.375rem; }
.md-mathjax-midline { background: var(--elevated-background); }
#write > h3.md-focus::before { left: -1.5625rem; top: 0.375rem; }
#write > h4.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h5.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
#write > h6.md-focus::before { left: -1.5625rem; top: 0.285714rem; }
.md-image > .md-meta { border-radius: 4px; padding: 2px 0px 0px 4px; font-size: 0.9em; color: inherit; }
.md-tag { color: var(--text-color); opacity: 1; }
.md-toc { margin-top: 20px; padding-bottom: 20px; }
.sidebar-tabs { border-bottom: none; }
#typora-quick-open { border: 1px solid var(--border); background-color: var(--elevated-background); }
#typora-quick-open-item { background-color: var(--elevated-background); border-color: rgb(254, 254, 254) rgb(229, 229, 229) rgb(229, 229, 229) rgb(238, 238, 238); border-style: solid; border-width: 1px; }
.on-focus-mode blockquote { border-left-color: rgba(85, 85, 85, 0.12); }
header, .context-menu, .megamenu-content, footer { font-family: var(--general-font); }
.file-node-content:hover .file-node-icon, .file-node-content:hover .file-node-open-state { visibility: visible; }
.mac-seamless-mode #typora-sidebar { background-color: var(--side-bar-bg-color); }
.md-lang { color: rgb(180, 101, 77); }
#md-notification .btn { border: 0px; }
.dropdown-menu .divider { border-color: rgb(229, 229, 229); opacity: 0.4; }
.ty-preferences .window-content { background-color: var(--elevated-background); }
.ty-preferences .nav-group-item.active { color: var(--text-color); background: rgb(153, 153, 153); }
.menu-item-container a.menu-style-btn { background-color: var(--elevated-background); background-image: linear-gradient(rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0)); }
.cm-keyword { color: var(--color-cm-keyword) !important; font-weight: 700 !important; }
.cm-variable { color: var(--color-cm-v) !important; }
.cm-tag { color: var(--color-cm-keyword) !important; font-weight: 700 !important; }
.cm-variable-3, .cm-variable-2 { color: var(--color-cm-v3) !important; font-weight: 700 !important; }
.cm-def { color: var(--color-cm-attr) !important; }
.cm-attribute { color: var(--color-cm-attr) !important; }
.cm-comment, .md-comment, .md-meta { color: var(--color-cm-comment) !important; }
.cm-string { color: var(--color-cm-string) !important; font-variant-ligatures: common-ligatures !important; }
.cm-link { color: var(--color-cm-link) !important; }
.cm-type { color: var(--color-cm-v3); }
.cm-property { color: var(--color-cm-v3) !important; }
.cm-tag:not(.cm-bracket) { font-weight: 700; }
.cm-operator { color: var(--color-cm-operator) !important; }
.cm-number { color: var(--color-cm-number) !important; }
.cm-meta { color: var(--color-cm-meta) !important; font-weight: 700 !important; }
.cm-builtin { color: var(--color-cm-builtin) !important; }
li.task-list-item { list-style-type: none; }
li.task-list-item > input[type="checkbox"], #write input[type="checkbox"] { list-style: none; background-position: initial; background-size: initial; background-repeat: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: initial; -webkit-appearance: none; width: 24px; height: 24px; background-image: var(--checkbox-unchecked); padding: 0px; margin-top: 1px; margin-left: -32px; }
li.task-list-item > input[type="checkbox"][checked="checked"], li.task-list-item > input[type="checkbox"][checked], #write input[type="checkbox"][checked="checked"], #write input[type="checkbox"][checked] { background-image: var(--checkbox-filled); }
a { color: var(--text-link); }
span.ty-icon.ty-delete-button::before { background-image: var(--dismiss); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
i.fa.fa-folder-o::before { background-image: var(--folder); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
i.file-node-icon.fa.fa-folder::before { background-image: var(--folder); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
i.file-node-icon.fa.fa-file-text-o::before { background-image: var(--document); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
i.fa.fa-caret-down::before { background-image: var(--chevron-down); vertical-align: middle; content: " "; width: 12px; height: 12px; display: inline-block; }
i.fa.fa-caret-right::before { background-image: var(--chevron-right); vertical-align: middle; content: " "; width: 12px; height: 12px; display: inline-block; }
.file-node-open-state { width: 16px; text-align: center; }
span.ty-icon.ty-file-tree::before { background-image: var(--tree); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
span.ty-icon.ty-left-arrow::before { background-image: var(--arrowleft); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
span.ty-icon.ty-list::before { background-image: var(--navigation); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
span.ion-ios7-search-strong::before { background-image: var(--search); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
.sidebar-tab-btn, span.ion-ios7-search-strong, .sidebar-footer-item .footer-btn { display: flex !important; align-items: center !important; justify-content: center !important; vertical-align: middle !important; }
span.ty-icon.ty-add::before { background-image: var(--add); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-bottom: 2px; }
span.ty-icon.ty-dots-v::before { background-image: var(--dots); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-bottom: 2px; }
span.ty-icon.ty-three-cells::before { background-image: var(--cells); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-bottom: 2px; }
mark { border-radius: 4px; color: var(--mark-text); font-weight: inherit; background-color: var(--mark-bg); margin-left: 2px; margin-right: 2px; padding: 0px 4px 2px; border-bottom: var(--mark-border); }
del { border-radius: 4px; color: var(--text-color); font-weight: inherit; background-color: rgba(136, 136, 136, 0.314); margin-left: 2px; margin-right: 2px; padding: 0px 4px 2px; text-decoration-color: var(--text-color); opacity: 0.3; }
.sidebar-footer-item { height: 100%; vertical-align: middle; justify-content: center; }
.file-node-background { height: 32px; }
.file-library-node.file-tree-node.active > .file-node-content { color: white; }
.file-library-node.file-tree-node.active > .file-node-content > i { filter: var(--icon-filer); }
.file-library-node.file-tree-node.active > .file-node-background { background-color: var(--accent-color); border: none; }
.cm-header, .cm-header-1 { color: var(--title-font) !important; }
.cm-atom { color: var(--color-cm-builtin) !important; }
#filesearch-case-option-btn > svg, #searchpanel-case-option-btn > svg { display: none; }
#filesearch-case-option-btn::before, #searchpanel-case-option-btn::before { background-image: var(--case); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
#filesearch-word-option-btn > svg, #searchpanel-word-option-btn > svg { display: none; }
#filesearch-word-option-btn::before, #searchpanel-word-option-btn::before { background-image: var(--match); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
.mac-seamless-mode #md-searchpanel, #md-searchpanel { box-shadow: rgba(0, 0, 0, 0.13) 0px 6.4px 14.4px 0px, rgba(0, 0, 0, 0.11) 0px 1.2px 3.6px 0px; border-bottom: 1px solid var(--border); max-height: 72px; }
.mac-seamless-mode #md-searchpanel input, #md-searchpanel input { height: auto; }
.mac-seamless-mode #md-searchpanel.searchpanel-replace-mode, #md-searchpanel.searchpanel-replace-mode { max-height: 108px; }
.ion-chevron-up::before { background-image: var(--chevron-up); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
.ion-chevron-down::before { background-image: var(--chevron-next); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
.ion-close-round::before { background-image: var(--dismiss); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; }
table.md-table { box-sizing: border-box; overflow: hidden; border: none !important; }
table { border-collapse: separate; }
tbody > tr > td:not(:first-child) { box-sizing: border-box; border-top: none; border-left: none; border-image: initial; border-right: var(--table-border); border-bottom: var(--table-border); }
tbody > tr > td:first-child { box-sizing: border-box; border-top: none; border-image: initial; border-bottom: var(--table-border); border-left: var(--table-border); border-right: var(--table-border); }
tr > th:not(:first-child) { box-sizing: border-box; border-left: none; border-image: initial; border-top: var(--table-border); border-right: var(--table-border); border-bottom: var(--table-border); }
tr > th:first-child { box-sizing: border-box; border: var(--table-border); }
tr:first-child > th:first-child { border-top-left-radius: 4px; }
tr:first-child > th:last-child { border-top-right-radius: 4px; }
tbody > tr:last-child > td:last-child { border-bottom-right-radius: 4px; }
tbody > tr:last-child > td:first-child { border-bottom-left-radius: 4px; }
table tr:nth-child(2n), table thead > tr { background-color: var(--elevated-background); }
table tbody tr:nth-child(2n+1) { background-color: var(--bg-color); }
thead:last-child > tr:last-child > th:first-child { border-bottom-left-radius: 4px; }
thead:last-child > tr:last-child > th:last-child { border-bottom-right-radius: 4px; }
table { font-feature-settings: "tnum"; }
blockquote > h1:first-child, blockquote > h2:first-child, blockquote > h3:first-child, blockquote > h4:first-child, blockquote > h5:first-child, blockquote > h6:first-child { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-stretch: ; line-height: ; font-family: ; font-weight: 700; margin: -12px -16px -8px; padding: 12px 16px 8px; border-top-right-radius: 4px; border-top-left-radius: 4px; display: flex; align-items: center; font-size: inherit !important; }
blockquote > h1:first-child { color: var(--bookmark-color); }
blockquote > h1:first-child::before { background-image: var(--bookmark-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }
blockquote > h2:first-child { color: var(--star-color); }
blockquote > h2:first-child::before { background-image: var(--star-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }
blockquote > h3:first-child { color: var(--lightbulb-color); }
blockquote > h3:first-child::before { background-image: var(--light-bulb-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }
blockquote > h4:first-child { color: var(--note-color); }
blockquote > h4:first-child::before { background-image: var(--note-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }
blockquote > h5:first-child { color: var(--alert-color); }
blockquote > h5:first-child::before { background-image: var(--warn-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }
blockquote > h6:first-child { color: var(--question-color); }
blockquote > h6:first-child::before { background-image: var(--chat-help-filled); vertical-align: middle; content: " "; width: 20px; height: 20px; display: inline-block; margin-right: 4px; }


</style>
</head>
<body class='typora-export os-windows' >
<div  id='write'  class = 'is-node'><h1><a name="gui使用说明" class="md-header-anchor"></a><span>GUI使用说明</span></h1><div class='md-toc' mdtype='toc'><p class="md-toc-content"><span class="md-toc-item md-toc-h1" data-ref="n0"><a class="md-toc-inner" style="cursor: pointer;" href="#gui使用说明">GUI使用说明</a></span><span class="md-toc-item md-toc-h2" data-ref="n4"><a class="md-toc-inner" style="cursor: pointer;" href="#前言">前言</a></span><span class="md-toc-item md-toc-h2" data-ref="n9"><a class="md-toc-inner" style="cursor: pointer;" href="#图像资源">图像资源</a></span><span class="md-toc-item md-toc-h3" data-ref="n11"><a class="md-toc-inner" style="cursor: pointer;" href="#图片资源">图片资源</a></span><span class="md-toc-item md-toc-h3" data-ref="n18"><a class="md-toc-inner" style="cursor: pointer;" href="#字库资源">字库资源</a></span><span class="md-toc-item md-toc-h2" data-ref="n22"><a class="md-toc-inner" style="cursor: pointer;" href="#图像绘制">图像绘制</a></span><span class="md-toc-item md-toc-h2" data-ref="n28"><a class="md-toc-inner" style="cursor: pointer;" href="#控件及属性">控件及属性</a></span><span class="md-toc-item md-toc-h3" data-ref="n135"><a class="md-toc-inner" style="cursor: pointer;" href="#animate-动画控件">Animate 动画控件</a></span><span class="md-toc-item md-toc-h3" data-ref="n187"><a class="md-toc-inner" style="cursor: pointer;" href="#canvas-画布控件">Canvas 画布控件</a></span><span class="md-toc-item md-toc-h3" data-ref="n212"><a class="md-toc-inner" style="cursor: pointer;" href="#chartbar-柱状图">ChartBar 柱状图</a></span><span class="md-toc-item md-toc-h3" data-ref="n256"><a class="md-toc-inner" style="cursor: pointer;" href="#circlebar-环形进度条">Circlebar 环形进度条</a></span><span class="md-toc-item md-toc-h3" data-ref="n304"><a class="md-toc-inner" style="cursor: pointer;" href="#colorreplacer-颜色替换器">ColorReplacer 颜色替换器</a></span><span class="md-toc-item md-toc-h3" data-ref="n325"><a class="md-toc-inner" style="cursor: pointer;" href="#container-控件容器">Container 控件容器</a></span><span class="md-toc-item md-toc-h3" data-ref="n349"><a class="md-toc-inner" style="cursor: pointer;" href="#digital-数字图片">Digital 数字图片</a></span><span class="md-toc-item md-toc-h3" data-ref="n393"><a class="md-toc-inner" style="cursor: pointer;" href="#digitallist-数字组图片">DigitalList 数字组图片</a></span><span class="md-toc-item md-toc-h3" data-ref="n449"><a class="md-toc-inner" style="cursor: pointer;" href="#label文字标签">Label文字标签</a></span><span class="md-toc-item md-toc-h3" data-ref="n521"><a class="md-toc-inner" style="cursor: pointer;" href="#matrix-矩阵图形">Matrix 矩阵图形</a></span><span class="md-toc-item md-toc-h3" data-ref="n553"><a class="md-toc-inner" style="cursor: pointer;" href="#number数值">Number数值</a></span><span class="md-toc-item md-toc-h3" data-ref="n625"><a class="md-toc-inner" style="cursor: pointer;" href="#number-list-数值列表">Number List 数值列表</a></span><span class="md-toc-item md-toc-h3" data-ref="n697"><a class="md-toc-inner" style="cursor: pointer;" href="#picturebox-图片框">Picturebox 图片框</a></span><span class="md-toc-item md-toc-h3" data-ref="n737"><a class="md-toc-inner" style="cursor: pointer;" href="#picker-滚动选择器">Picker 滚动选择器</a></span><span class="md-toc-item md-toc-h3" data-ref="n808"><a class="md-toc-inner" style="cursor: pointer;" href="#pointer-指针图片">Pointer 指针图片</a></span><span class="md-toc-item md-toc-h3" data-ref="n864"><a class="md-toc-inner" style="cursor: pointer;" href="#progressbar-进度条">Progressbar 进度条</a></span><span class="md-toc-item md-toc-h3" data-ref="n908"><a class="md-toc-inner" style="cursor: pointer;" href="#qrcode-二维码">Qrcode 二维码</a></span><span class="md-toc-item md-toc-h3" data-ref="n956"><a class="md-toc-inner" style="cursor: pointer;" href="#switch-开关">Switch 开关</a></span><span class="md-toc-item md-toc-h3" data-ref="n1008"><a class="md-toc-inner" style="cursor: pointer;" href="#textbox-文本框">Textbox 文本框</a></span><span class="md-toc-item md-toc-h3" data-ref="n1076"><a class="md-toc-inner" style="cursor: pointer;" href="#textpage-文本页">Textpage 文本页</a></span><span class="md-toc-item md-toc-h3" data-ref="n1144"><a class="md-toc-inner" style="cursor: pointer;" href="#textscroll-滚动文本">TextScroll 滚动文本</a></span><span class="md-toc-item md-toc-h3" data-ref="n1216"><a class="md-toc-inner" style="cursor: pointer;" href="#touch-触摸">Touch 触摸</a></span><span class="md-toc-item md-toc-h2" data-ref="n1228"><a class="md-toc-inner" style="cursor: pointer;" href="#gui效果">GUI效果</a></span><span class="md-toc-item md-toc-h3" data-ref="n1230"><a class="md-toc-inner" style="cursor: pointer;" href="#惯性滚动fling-effects">惯性滚动（fling effects)</a></span><span class="md-toc-item md-toc-h3" data-ref="n1249"><a class="md-toc-inner" style="cursor: pointer;" href="#views间过渡">Views间过渡</a></span><span class="md-toc-item md-toc-h3" data-ref="n1251"><a class="md-toc-inner" style="cursor: pointer;" href="#views导航">Views导航</a></span><span class="md-toc-item md-toc-h3" data-ref="n1253"><a class="md-toc-inner" style="cursor: pointer;" href="#毛玻璃待实现）">毛玻璃（待实现）</a></span><span class="md-toc-item md-toc-h2" data-ref="n1256"><a class="md-toc-inner" style="cursor: pointer;" href="#gui扩展">GUI扩展</a></span><span class="md-toc-item md-toc-h2" data-ref="n1288"><a class="md-toc-inner" style="cursor: pointer;" href="#注意事项">注意事项</a></span><span class="md-toc-item md-toc-h3" data-ref="n1296"><a class="md-toc-inner" style="cursor: pointer;" href="#ui界面延伸使用">UI界面延伸使用</a></span><span class="md-toc-item md-toc-h2" data-ref="n1322"><a class="md-toc-inner" style="cursor: pointer;" href="#附录">附录</a></span></p></div><p>&nbsp;</p><h2><a name="前言" class="md-header-anchor"></a><span>前言</span></h2><p><span>本文档仅限于说明如何使用本工程内的GUI，介绍GUI的相关设计和运行。 </span></p><p><span>在设计每个显示界面时，这里我们称之为View。每个View由多控件组成（这里可以参考Windows或者其他操作系统的窗体/App开发），因此本GUI更多地介绍控件的设计以及如何使用。</span></p><p><span>由于本文档及GUI的创作仓促，其中的不足可见。如果您在使用过程中有任何问题及建议，请邮件至 seventrue#126.com (将#换成@)，谢谢！</span></p><hr /><h2><a name="图像资源" class="md-header-anchor"></a><span>图像资源</span></h2><p><span>GUI使用图片或者点阵数据来完成绘制。当前图像资源分为两类：图片资源和字库。</span></p><h3><a name="图片资源" class="md-header-anchor"></a><span>图片资源</span></h3><p><span>颜色格式为RGB565，点颜色为大端模式, 颜色定义如下：</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#define COLOR_WHITE &nbsp; &nbsp; (0xFFFF)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#define COLOR_BLACK &nbsp; &nbsp; (0x0000)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#define COLOR_RED &nbsp; &nbsp; &nbsp; (0x00F8)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#define COLOR_GREEN &nbsp; &nbsp; (0xE007)</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-meta">#define COLOR_BLUE &nbsp; &nbsp;  (0x1F00)</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="height: 100px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>图片存储包含header区和数据区，header区用来获取图片最终位置，由多个图片头(header)组成，而header里要求包含</span><strong><span>相同尺寸</span></strong><span>的图片，header的格式定义为</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 41px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 33px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><span><span>​</span>x</span></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -33px; width: 33px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 24px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">typedef</span> <span class="cm-keyword">struct</span>{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint8_t</span> <span class="cm-variable">no</span>;<span class="cm-tab" role="presentation" cm-text="	"> </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">// 图片组序号</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint8_t</span> <span class="cm-variable">type</span>;<span class="cm-tab" role="presentation" cm-text="	">   </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">// 类型</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint8_t</span> <span class="cm-variable">count</span>;<span class="cm-tab" role="presentation" cm-text="	">  </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">// 包含多少张图片</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint8_t</span> <span class="cm-variable">bitcount</span>;<span class="cm-tab" role="presentation" cm-text="	">   </span><span class="cm-comment">// bitmap位数</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint16_t</span> <span class="cm-variable">w</span>;<span class="cm-tab" role="presentation" cm-text="	"> </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">// 宽度</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint16_t</span> <span class="cm-variable">h</span>;<span class="cm-tab" role="presentation" cm-text="	"> </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-tab" role="presentation" cm-text="	">    </span><span class="cm-comment">// 高度</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-variable-3">uint32_t</span> <span class="cm-variable">address</span>; <span class="cm-tab" role="presentation" cm-text="	">  </span><span class="cm-comment">// 图片的开始位置</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 24px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">}<span class="cm-variable">iqw_gui_assets_image_t</span>;</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 200px;"></div><div class="CodeMirror-gutters" style="height: 200px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 32px;"></div></div></div></div></pre><p><span>图片的最终位置的计算方式为： w * h * 2 * index + address,</span></p><p><span>假如图片w = 100, h = 100, pixel = 2bytes, 此组图片里有10张图片，获取index = 5的图片存储位置， final_address = 100 * 100 * 2 + address </span></p><h3><a name="字库资源" class="md-header-anchor"></a><span>字库资源</span></h3><p><span>字库使用了由多个ASCII、数字、UNICODE字库组成，字库的生成参考FontMaker.(</span><a href='http://www.downxia.com/downinfo/183553.html' target='_blank' class='url'>http://www.downxia.com/downinfo/183553.html</a><span> )</span></p><p><span>这里不再作多介绍 。</span></p><p>&nbsp;</p><h2><a name="图像绘制" class="md-header-anchor"></a><span>图像绘制</span></h2><p><span>当前绘制过程为先读取每个控件内容更新到缓存上，再由主控发送到显示设备上。如果使用了PSRAM，可以先将整屏内容发送到PSRAM，再统一刷新。</span></p><p><span>当前图像绘制函数有三个：</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>5</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">invalidate_cur</span>(); <span class="cm-comment">// 重新绘制当前界面</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">invalidate_both</span>(); <span class="cm-comment">// 重新绘制当前界面和子界面（滑动过程、切换过程转场需要同时刷新两个界面（如果使用了PSRAM，那么需要将两个界面全部重新绘制到PSRAM中</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">invalidate_part</span>(); <span class="cm-comment">// 重新绘制部分界面（需要指定绘制区域来进行当前界面重新绘制）</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span cm-text="">​</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 在view的显示初始化时，如果来源为创建界面时，启动部分绘制。在界面滑动过程，则会自动停止部分绘制。因此指定绘制区域不加入偏移量等因素。</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="height: 100px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p>&nbsp;</p><p>&nbsp;</p><h2><a name="控件及属性" class="md-header-anchor"></a><span>控件及属性</span></h2><p><span>为方便使用，定义了多种类型控件，包含但不限于以下控件类型：</span></p><ul><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Animate 用于帧动画显示</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Canvas 用于创建矩形画布</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' disabled='disabled' /><p><span>ChartBar 柱状图</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Container 用于创建组合控件</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Circlebar 圆环</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>ColorReplacer 颜色替换器</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Digital 数字图片</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Digitallist 数字图表列表</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Label 标签</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' disabled='disabled' /><p><span>Matrix 矩阵图形</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Number 数值显示</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Numberlist 数值列表显示</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Picker 滚动选择器</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Picturebox 图片框</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Pointer 指针</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Qrcode 二维码</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Progressbar 进度条</span></p></li><li class='md-task-list-item task-list-item task-list-not-done' ><input type='checkbox' disabled='disabled' /><p><span>ScrollText 滚动文本</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Switch 开关</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Textbox 文本框</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Textpage 文本页</span></p></li><li class='md-task-list-item task-list-item task-list-done' ><input type='checkbox' disabled='disabled' checked/><p><span>Touch触摸</span></p></li></ul><p><span>控件定义了基础属性, 如下表所示，控件必须指定控件类型，坐标和宽高。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>type</span></td><td><span>控件类型</span></td><td><span>16</span></td></tr><tr><td><span>x</span></td><td><span>起始坐标x/指定位置x</span></td><td><span>16</span></td></tr><tr><td><span>y</span></td><td><span>起始坐标y/指定位置y</span></td><td><span>16</span></td></tr><tr><td><span>w</span></td><td><span>控件宽度</span></td><td><span>16</span></td></tr><tr><td><span>h</span></td><td><span>控件高度</span></td><td><span>16</span></td></tr><tr><td><span>tag</span></td><td><span>用于区别控件触摸事件发生时的id</span></td><td><span>8</span></td></tr><tr><td><span>visible</span></td><td><span>控件可见属性</span></td><td><span>1</span></td></tr><tr><td><span>border</span></td><td><span>绘制边框, 目前仅支持progressbar</span></td><td><span>1</span></td></tr><tr><td><span>touchable</span></td><td><span>允许触摸识别,如果需要定义控件识别触摸, 需要同时分配tag值,以便识别后触摸位置返回对应的id</span></td><td><span>1</span></td></tr><tr><td><span>overlay</span></td><td><span>图片叠加, 叠加时需要指定透明颜色</span></td><td><span>1</span></td></tr><tr><td><span>multiline</span></td><td><span>字符串文字是否支持多行显示</span><br><span>默认为多行显示</span><br><span>在滚动字符中，只能单行显示，设置为多行显示可能会异常</span></td><td><span>1</span></td></tr><tr><td><span>reserved</span></td><td><span>保留</span></td><td><span>3</span></td></tr></tbody></table></figure><p><span>除了基础属性，控件还定义对应类型的属性，用于初始化控件本身参数，如果需要动态更新类型属性，则对属性进行修改（使用更新属性定义修改或者直接修改类型属性）；为了减少控件大小，有些控件定义了扩展属性，用于显示过程中计算出扩展的属性值为使用。</span></p><p><span>为了加快控件访问速度，定义的控件组将会在创建时拷贝到RAM中，因此可以进行修改。修改时不能操作定义为const的控件组。如下，定义一个表盘界面，包含了背景和三个指针</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 41px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 33px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>10</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -33px; width: 33px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 24px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">const</span> <span class="cm-keyword">static</span> <span class="cm-variable">ui_widgets_type_t</span> <span class="cm-variable">wglWatchface1</span>[] <span class="cm-operator">=</span> </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">{</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  [<span class="cm-number">0</span>] <span class="cm-operator">=</span> <span class="cm-variable">uiPictureBox</span>( <span class="cm-variable">IMG_Watchface_1_Background_240_240_01</span>, <span class="cm-number">0</span>, <span class="cm-number">0</span>,<span class="cm-number">0</span>, <span class="cm-variable">GUI_LCD_WIDTH</span>, <span class="cm-variable">GUI_LCD_HEIGHT</span> ),</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">// hour pointer</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  [<span class="cm-number">1</span>] <span class="cm-operator">=</span> <span class="cm-variable">uiPointer</span>( <span class="cm-variable">IMG_Watchface_1_HourPointer_009_062_01</span>, <span class="cm-number">0</span>, <span class="cm-number">120</span>, <span class="cm-number">120</span>, <span class="cm-number">9</span>, <span class="cm-number">62</span>, <span class="cm-number">5</span>, <span class="cm-number">48</span>, <span class="cm-variable">COLOR_WHITE</span> ),</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">// minute pointer </span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  [<span class="cm-number">2</span>] <span class="cm-operator">=</span> <span class="cm-variable">uiPointer</span>( <span class="cm-variable">IMG_Watchface_1_MinutePointer_007_080_01</span>, <span class="cm-number">0</span>, <span class="cm-number">120</span>, <span class="cm-number">120</span>, <span class="cm-number">7</span>, <span class="cm-number">80</span>, <span class="cm-number">4</span>, <span class="cm-number">66</span>, <span class="cm-variable">COLOR_WHITE</span> ),</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp; &nbsp;<span class="cm-comment">// second pointer </span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 24px;">9</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"> &nbsp;  [<span class="cm-number">3</span>] <span class="cm-operator">=</span> <span class="cm-variable">uiPointer</span>( <span class="cm-variable">IMG_Watchface_1_SecondPointer_009_087_01</span>, <span class="cm-number">0</span>, <span class="cm-number">120</span>, <span class="cm-number">120</span>, <span class="cm-number">9</span>, <span class="cm-number">87</span>, <span class="cm-number">5</span>, <span class="cm-number">73</span>, <span class="cm-variable">COLOR_WHITE</span> ),</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -33px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 24px;">10</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;">};</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 200px;"></div><div class="CodeMirror-gutters" style="height: 200px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 32px;"></div></div></div></div></pre><p>&nbsp;</p><p>&nbsp;</p><hr /><h3><a name="animate-动画控件" class="md-header-anchor"></a><span>Animate 动画控件</span></h3><p><span>用来创建帧图片组成动画显示.</span></p><p><strong><span>初始化属性</span></strong></p><p><span>在初始化时添加的属性内容</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td><span>图片列表组序号</span></td><td>&nbsp;</td></tr><tr><td><span>imageidx</span></td><td><span>图片在组内的序号</span></td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td><span>透明颜色，用来忽略当前图片上指定的颜色</span></td><td>&nbsp;</td></tr><tr><td><span>counts</span></td><td><span>图片组内总数</span></td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td><span>用于后续扩展自定义表盘时使用，目前暂时忽略此属性</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><p><span>在更新里允许修改的内容</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>x</span></td><td><span>图像的新位置横坐标</span></td><td>&nbsp;</td></tr><tr><td><span>y</span></td><td><span>图像的新位置纵坐标</span></td><td>&nbsp;</td></tr><tr><td><span>idx</span></td><td><span>图像源的图片序号</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><p><span>指在控件在使用过程中，根据控件的属性需要添加额外的数据来记录控件的绘制过程。</span></p><p><span>无</span></p><hr /><h3><a name="canvas-画布控件" class="md-header-anchor"></a><span>Canvas 画布控件</span></h3><p><span>创建一张画布，同时也是一个矩形，也可当作横线或者直线来使用。</span></p><p><strong><span>初始化属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>color</span></td><td><span>用来填充画布的颜色</span></td><td><span>16bits</span></td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>color</span></td><td><span>更新画布的颜色</span></td><td><span>16bits</span></td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><p><span>无</span></p><hr /><h3><a name="chartbar-柱状图" class="md-header-anchor"></a><span>ChartBar 柱状图</span></h3><p><span>创建柱状图，根据数据个数，如果为autoscale, 自动计算大小；图像间隙</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>forecolor</span></td><td><span>条状颜色</span></td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td><span>边框颜色 ，如果边框属性设置为1的话</span></td><td>&nbsp;</td></tr><tr><td><span>autoscale</span></td><td><span>柱状条形宽度</span></td><td>&nbsp;</td></tr><tr><td><span>gap</span></td><td><span>柱状条间隙</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="circlebar-环形进度条" class="md-header-anchor"></a><span>Circlebar 环形进度条</span></h3><p><span>用于绘制圆形弧度</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>color</span></td><td><span>颜色</span></td><td>&nbsp;</td></tr><tr><td><span>radius</span></td><td><span>半径，指中心点到内圈距离</span></td><td>&nbsp;</td></tr><tr><td><span>thickness</span></td><td><span>厚度，内圈到外圈的距离</span></td><td>&nbsp;</td></tr><tr><td><span>angles</span></td><td><span>开始角度</span></td><td>&nbsp;</td></tr><tr><td><span>anglee</span></td><td><span>结束角度</span></td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td><span>数据源（暂未使用）</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>type</span></th></tr></thead><tbody><tr><td><span>angles</span></td><td><span>新的开始角度</span></td><td>&nbsp;</td></tr><tr><td><span>anglee</span></td><td><span>新的结束角度</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>扩展属性</span></strong></p><p><span>无</span></p><hr /><h3><a name="colorreplacer-颜色替换器" class="md-header-anchor"></a><span>ColorReplacer 颜色替换器</span></h3><p><span>颜色替换器用于替换指定区域内的颜色。例如</span><code>picker</code><span>中间行的颜色替换为高亮的颜色，提升识别度。</span></p><p><strong><span>初始化属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>srcColor</span></td><td><span>原始颜色</span></td><td>&nbsp;</td></tr><tr><td><span>dstColor</span></td><td><span>替换成的颜色</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><p><span>无</span></p><p><strong><span>计算属性</span></strong></p><p><span>无</span></p><hr /><h3><a name="container-控件容器" class="md-header-anchor"></a><span>Container 控件容器</span></h3><p><span>用于包含多个子控件，控件地址相对于container位置。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>sub_widget_cnt</span></td><td><span>子控件个数</span></td><td>&nbsp;</td></tr><tr><td><span>delta_x</span></td><td><span>横从标偏移位置</span></td><td>&nbsp;</td></tr><tr><td><span>delta_y</span></td><td><span>纵坐标偏移位置</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><p><span>无</span></p><p><strong><span>扩展属性</span></strong></p><p><span>无</span></p><hr /><h3><a name="digital-数字图片" class="md-header-anchor"></a><span>Digital 数字图片</span></h3><p><span>用于显示指定顺序的图片，如0-9图片。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td><span>图片资源组</span></td><td>&nbsp;</td></tr><tr><td><span>index</span></td><td><span>图片资源序号</span></td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td><span>忽略的颜色</span></td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td><span>数据源</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="digitallist-数字组图片" class="md-header-anchor"></a><span>DigitalList 数字组图片</span></h3><p><span>在digital中增加了多个数字图片，但属性由一个int数值提供，目前只支持正整数。比如需要使用图片0-9显示步数，更新digitallist的值属性，控件更新多组图片，按照指定的宽度叠加后根据顺序绘制图片。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td><span>图片资源组</span></td><td>&nbsp;</td></tr><tr><td><span>index</span></td><td><span>图片序号（未使用）</span></td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td><span>忽略颜色，当图片叠加时，选择忽略颜色</span></td><td>&nbsp;</td></tr><tr><td><span>idx[6]</span></td><td><span>每组图片的序号</span></td><td>&nbsp;</td></tr><tr><td><span>cnt</span></td><td><span>数字组个数</span></td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td><span>数据源</span></td><td>&nbsp;</td></tr><tr><td><span>format</span></td><td><span>格式化（需要格式化数字后，转成对应图片组序号来显示）</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="label文字标签" class="md-header-anchor"></a><span>Label文字标签</span></h3><p><span>显示文字，定义时指定需要显示的文字。需要更新文字建议使用textbox控件。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td><span>内容，void*类型，文字分为 ASCII和UNICODE</span></td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td><span>字符个数</span></td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td><span>最大长度</span></td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td><span>字体资源（使用的字体）</span><br><span>字体资源并不是固定的，不同设备可能需要不同的字体资源，选择字体生成所需要的字库文件</span></td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td><span>背景颜色（如果fill=1,使用背景颜色填充背景）</span></td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td><span>前景色，字符的颜色</span></td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td><span>对齐方式，参见对齐方式</span></td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td><span>是否填充背景</span></td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td><span>编码方式：编码方式决定GUI以何种方式对字符串进行解码</span><br><span>0 - ASCII，以每个字节来获取字符串</span><br><span>1 - UNICODE，以每两个字节来获取字符串</span></td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td><span>扩展属性指针</span></td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td><span>数据源</span></td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="matrix-矩阵图形" class="md-header-anchor"></a><span>Matrix 矩阵图形</span></h3><p><span>矩阵图形用来对单像素点生成指定颜色。比如黑白像素矩阵，指定替换成其他颜色矩阵。这样方便自定义字符点阵，然后进行显示。（字符显示和二维码的最终输出）。支持倍数放大。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>color</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="number数值" class="md-header-anchor"></a><span>Number数值</span></h3><p><span>数值控件，使用字库中所包含的字体显示一个数值。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>format</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="number-list-数值列表" class="md-header-anchor"></a><span>Number List 数值列表</span></h3><p><span>多个数组组合显示，这样只定义一个控件就可以了。比如小时:分钟。定义一个控件，格式化为:</span><code>%02d:%02d</code><span>, 更新控件属性时，格式为对应格式后，自动绘制。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>format</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="picturebox-图片框" class="md-header-anchor"></a><span>Picturebox 图片框</span></h3><p><span>定义一个图片显示。图片位置索引固定，不用重复更新其属性。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>idx</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="picker-滚动选择器" class="md-header-anchor"></a><span>Picker 滚动选择器</span></h3><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>pitch</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="pointer-指针图片" class="md-header-anchor"></a><span>Pointer 指针图片</span></h3><p><span>用于显示时针、分针、秒针。当前GUI库只定义了0~360度，分辨率为1的三角函数结果，用于快速计算旋转位置的。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>idx</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>pivot_x</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>pivot_y</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>angle</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="progressbar-进度条" class="md-header-anchor"></a><span>Progressbar 进度条</span></h3><p><span>条形进度条，用于进度显示。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>value</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="qrcode-二维码" class="md-header-anchor"></a><span>Qrcode 二维码</span></h3><p><span>定义一个二维码的显示，由于二维码本身较小，需要放大来显示。当前二维码为自动居中显示，当二维码原始大小为29*29，定义(x,y,w,h)为(0，0，50， 50)，通过计算得出二维码放大两倍填不完，只能以原始尺寸绘制，因此，显示位置x = （50 - 29 ）/ 2 = 5, y = (50 - 29 ) / 2 = 5, 最后的实际显示为( 5, 5, 29, 29)</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>matrix</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="switch-开关" class="md-header-anchor"></a><span>Switch 开关</span></h3><p><span>开关控件，需要两个相同大小的图片实现。指定ON的图片index, OFF的图片索引。在更新switch属性时，更新需要显示的图片。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>imagelist</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>idx</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maskcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>idxon</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>idxoff</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>datasource</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="textbox-文本框" class="md-header-anchor"></a><span>Textbox 文本框</span></h3><p><span>用于显示文本文字。与label不同的是，这里的文本内容可能需要更新。更新属性时需要操作的参数会更多。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="textpage-文本页" class="md-header-anchor"></a><span>Textpage 文本页</span></h3><p><span>用于显示文本文字。与Textbox不同的时，限定了显示范围，文字只能在固定位置上滚动。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>content</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="textscroll-滚动文本" class="md-header-anchor"></a><span>TextScroll 滚动文本</span></h3><p><span>滚动文本，使用局部分刷新（每次更新文本移动区域), 滚动文本限于单行文本显示，不换行，计算的文本长度为累加，以&#39;\0&#39;为结束。</span></p><p><span>文字内容更新时，计算内容长度。当内容长度小于显示区域，不进行滚动；当内部长度大于显示区域时，结束符后留 两个空格给下段起始字符 进行显示。需要对字符进行显示。</span></p><p><span>每次刷新时，位置左移1。</span></p><p><span>滚动实现原理：固定有效显示位置，计算最大移动位置。每次移位，计算控件开始显示位置（小于有效区域或大于有效区域的都不进行显示）。根据字符的总长度，计算第一轮最后字符的显示位置，是否还有位置用于显示滚动字符，如果有，更新显示区域用于显示字符串口。</span></p><p><span>当显示字符的长度小于等于有效显示区域时，不执行滚动。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>context</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>len</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>maxlen</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fontasset</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>backcolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>forecolor</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>align</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>fill</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>encoding</span></td><td>&nbsp;</td><td>&nbsp;</td></tr><tr><td><span>extension</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>更新属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p><strong><span>计算属性</span></strong></p><figure><table><thead><tr><th><span>属性</span></th><th><span>用途</span></th><th><span>type</span></th></tr></thead><tbody><tr><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><hr /><h3><a name="touch-触摸" class="md-header-anchor"></a><span>Touch 触摸</span></h3><p><span>此控件不参与绘制，只提供一个检测触摸位置实例。建议单独定义触摸位置列表，但如果将触摸定义了显示控件列表中，此控件也不会绘制。</span></p><figure><table><thead><tr><th><span>属性</span></th><th><span>描述</span></th><th><span>bitwidth</span></th></tr></thead><tbody><tr><td><span>color</span></td><td>&nbsp;</td><td>&nbsp;</td></tr></tbody></table></figure><p>&nbsp;</p><h2><a name="gui效果" class="md-header-anchor"></a><span>GUI效果</span></h2><p><span>GUI实现了一些效果，这样在实际显示中更加生动。</span></p><h3><a name="惯性滚动fling-effects" class="md-header-anchor"></a><span>惯性滚动（fling effects)</span></h3><p><span>惯性滚动用于多项选择过程中，自动滚动到减速过程，自动停止在指定位置上。目前的惯性滚动加速度到减速过程并未使用贝塞尔曲线，有条件的可以自行实现，这样子的动画效果会更加合理。</span></p><p><span>使用惯性滚动前，可能需要定义变量存储当前的位移( 因为Picker控件包含了当前位移的属性)</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="C"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>4</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 当前已经产生的位移</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">static</span> <span class="cm-variable-3">int16_t</span> <span class="cm-variable">m_cur_offset</span> <span class="cm-operator">=</span> <span class="cm-number">0</span>; </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 需要更新的偏移量</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-keyword">static</span> <span class="cm-variable-3">int16_t</span> <span class="cm-variable">m_cur_delta</span>; </span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 80px;"></div><div class="CodeMirror-gutters" style="height: 80px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>fling的使用查看</span><code>view_timer.c</code><span> 和 </span><code>view_setting.c</code><span>这两个文件。</span><code>view_timer.c</code><span>中使用了两个fling来滚动picker，选择需要倒计时的时间，需要注意的是这里使用了两个fling, 在同一个view中使用多个fling时，需要设定一个header_fling作为主fling, 用来停止链表上所有的fling效果； </span><code>view_setting.c</code><span>中用来滚动查看设置选项。</span></p><p>&nbsp;</p><p><span>初始化，要使用惯性滚动，需要先初始化滚动的参数</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>8</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">/*</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">min: 滚动的最小距离</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">max: 滚动的最大距离 </span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">itemheight: item的高度，用于计算对齐偏移量，要求&gt;0</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">*/</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_init</span>(<span class="cm-variable">iqw_gui_layout_fling_t</span> <span class="cm-operator">*</span><span class="cm-variable">fling</span>, <span class="cm-variable-3">int16_t</span> <span class="cm-variable">min</span>, <span class="cm-variable-3">int16_t</span> <span class="cm-variable">max</span>, <span class="cm-variable-3">int16_t</span> <span class="cm-variable">itemheight</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">7</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 最后一个fling实例，需要设置下一个节点为NULL</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">8</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable">m_demo_fling</span><span class="cm-operator">-&gt;</span><span class="cm-variable">next</span> <span class="cm-operator">=</span> <span class="cm-variable">NULL</span>; </span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 160px;"></div><div class="CodeMirror-gutters" style="height: 160px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>当min和max相等时，意味着这是一个循环滚动的过程，如picker.</span></p><p><img src='res\picker示例.gif' alt='Picker' referrerPolicy='no-referrer' /></p><p>&nbsp;</p><p><span>当滑动事件产生时，使用函数开启滚动过程：</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">/*</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">speed: 滚动的初始速度值，目前以初始的恒定速度滚动20次，可以根据需要填充滚动的速度</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">但slide的事件产生时，有快速滑动也或能慢速滑动，因此可以根据不同事件填入不同的初始化速度。</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">当speed 为0， 则直接转入最后的位置校准过程，没有快速滚动过程。</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">*/</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_set</span>(<span class="cm-variable">iqw_gui_layout_fling_t</span> <span class="cm-operator">*</span><span class="cm-variable">fling</span>, <span class="cm-variable-3">int16_t</span> <span class="cm-variable">speed</span> );</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 120px;"></div><div class="CodeMirror-gutters" style="height: 120px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>同时，更新控制属性里调用函数获取偏移距离，</span><strong><span>更新完轴偏移量，cur_offset必须加上轴偏移量，而axis_delta清0，避免后续重复使用</span></strong></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>5</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">/*</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">cur_offset: 当前已产生的偏移量</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">axis_delta: 轴偏移量</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">*/</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_update</span>( <span class="cm-variable">iqw_gui_layout_fling_t</span> <span class="cm-operator">*</span><span class="cm-variable">fling</span>, <span class="cm-variable-3">int16_t</span> <span class="cm-variable">cur_offset</span>, <span class="cm-variable-3">int16_t*</span> <span class="cm-variable">axis_delta</span> )</span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 100px;"></div><div class="CodeMirror-gutters" style="height: 100px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>最后，在切换view时，必须关闭惯性滚动，避免在新view中产生滚动的刷新事件（这可能会影响到新view的动画效果）。</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>2</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation"><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_set_disable</span>( <span class="cm-variable">iqw_gui_layout_fling_t</span><span class="cm-operator">*</span> <span class="cm-variable">fling</span> ); </span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 为避免创建view里不是从当前view中创建，因此在临时创建view函数中，首先就要disable掉上一次使用的fling功能。（fling背后使用了定时器来快速刷新过程，可以在gui_core.c文件中查看到 gui_fling_timer 和  flling的备份指针）</span></span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 60px;"></div><div class="CodeMirror-gutters" style="height: 60px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><p><span>其他函数使用：</span></p><pre spellcheck="false" class="md-fences md-end-block md-fences-with-lineno ty-contain-cm modeLoaded" lang="c"><div class="CodeMirror cm-s-inner CodeMirror-wrap" lang="c"><div style="overflow: hidden; position: relative; width: 3px; height: 0px; top: 0px; left: 34px;"><textarea autocorrect="off" autocapitalize="off" spellcheck="false" tabindex="0" style="position: absolute; bottom: -1em; padding: 0px; width: 1000px; height: 1em; outline: none;"></textarea></div><div class="CodeMirror-scrollbar-filler" cm-not-content="true"></div><div class="CodeMirror-gutter-filler" cm-not-content="true"></div><div class="CodeMirror-scroll" tabindex="-1"><div class="CodeMirror-sizer" style="margin-left: 26px; margin-bottom: 0px; border-right-width: 0px; padding-right: 0px; padding-bottom: 0px;"><div style="position: relative; top: 0px;"><div class="CodeMirror-lines" role="presentation"><div role="presentation" style="position: relative; outline: none;"><div class="CodeMirror-measure"><pre><span>xxxxxxxxxx</span></pre><div class="CodeMirror-linenumber CodeMirror-gutter-elt"><div>6</div></div></div><div class="CodeMirror-measure"></div><div style="position: relative; z-index: 1;"></div><div class="CodeMirror-code" role="presentation" style=""><div class="CodeMirror-activeline" style="position: relative;"><div class="CodeMirror-activeline-background CodeMirror-linebackground"></div><div class="CodeMirror-gutter-background CodeMirror-activeline-gutter" style="left: -26px; width: 26px;"></div><div class="CodeMirror-gutter-wrapper CodeMirror-activeline-gutter" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">1</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 触摸屏 点下时，调用，立刻停止滚动</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">2</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_on_touch_press</span>(<span class="cm-variable">iqw_gui_layout_fling_t</span><span class="cm-operator">*</span> <span class="cm-variable">fling</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">3</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 触摸屏 松开时，调用，检测自动对位</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">4</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_on_touch_release</span>(<span class="cm-variable">iqw_gui_layout_fling_t</span><span class="cm-operator">*</span> <span class="cm-variable">fling</span>);</span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt" style="left: 0px; width: 17px;">5</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-comment">// 快速切换上/下一个item.</span></span></pre></div><div style="position: relative;"><div class="CodeMirror-gutter-wrapper" style="left: -26px;"><div class="CodeMirror-linenumber CodeMirror-gutter-elt CodeMirror-linenumber-show" style="left: 0px; width: 17px;">6</div></div><pre class=" CodeMirror-line " role="presentation"><span role="presentation" style="padding-right: 0.1px;"><span class="cm-variable-3">void</span> <span class="cm-def">iqw_gui_layout_fling_switch_item</span>( <span class="cm-variable">iqw_gui_layout_fling_t</span><span class="cm-operator">*</span> <span class="cm-variable">fling</span>, <span class="cm-variable-3">bool</span> <span class="cm-variable">neg</span>); </span></pre></div></div></div></div></div></div><div style="position: absolute; height: 0px; width: 1px; border-bottom: 0px solid transparent; top: 120px;"></div><div class="CodeMirror-gutters" style="height: 120px;"><div class="CodeMirror-gutter CodeMirror-linenumbers" style="width: 25px;"></div></div></div></div></pre><h3><a name="views间过渡" class="md-header-anchor"></a><span>Views间过渡</span></h3><p><span>在界面之间切换查看时，如果在每个View里写拖曳效果，效率较慢，因此需要定义一个view（transition)来专门处理切换切换的。在发生Drag事件后，当前view调用对应函数完成drag显示，后续的松开、拖动的触摸动作都由当transition view来处理。</span></p><h3><a name="views导航" class="md-header-anchor"></a><span>Views导航</span></h3><p><span>自动界面间导航，自行滚动。输入事件消耗掉，不处理。比如从左到右，从右到左，从上到下，从下到上进行导航切换。独立的view控制，完成后输入及显示交还到主界面。</span></p><h3><a name="毛玻璃待实现）" class="md-header-anchor"></a><span>毛玻璃（待实现）</span></h3><p><span>实现原理，在指定区域使用随机位置像素点替换当前位置颜色。</span></p><p>&nbsp;</p><h2><a name="gui扩展" class="md-header-anchor"></a><span>GUI扩展</span></h2><p><span style='color:green;background:lightblue;font-size:20px;font-family:字体;'><span>目前的GUI框架已经包含了图片、字库、环形进度条、矩形进度条等算法绘制，用户的需求不一，但仍可以方便完成(</span><em><span>目前GUI评估没有必须，但支持用户实现</span></em><span>）：</span></span></p><p>&nbsp;</p><ul><li><span>自定义控件</span></li></ul><blockquote><p><span>用户可以自行定义自己的控件，属性类型什么的。添加对应的</span><strong><span>控件类型</span></strong><span>，在 </span><code>iqw_gui_widget.c</code><span>里的</span></p><p><code>void iqw_gui_widget_extension( ui_widgets_type_t * widgets, uint32_t cnt)</code><span> 添加对应控件的</span><strong><span>扩展属性</span></strong><span>（如果有的话）</span></p><p><code>void iqw_gui_widget_update_prop( ui_widgets_type_t * widget, ui_property_t * prop )</code><span> 添加控件的</span><strong><span>属性更新处理</span></strong><span>。</span></p><p><code>void iqw_gui_widget_list_paint( iqw_gui_widget_list_t * p_widget_list )</code><span> 添加对应控件类型的</span><strong><span>绘制函数</span></strong><span>。</span></p><p><span>到此，一个自定义控件就基本完成了。</span></p></blockquote><ul><li><span>view 扩展优化</span></li></ul><blockquote><p><span>同一view里支持更多的widgets(需要更多的RAM)</span></p><p><span>局部绘制（只刷新某一部分的区域的图像，可以使用</span><code>lcd_memory</code><span>来存储图像)</span></p><p><span>减少内存消耗，可以通过</span><code>gui_core.c</code><span>中减少</span><code>lcd_memory，ui_cur_buffer, ui_sub_buffer</code><span>的大小</span></p><p><span>view的存活及进入退出（自行实现，当前没有更多的精力来完成）</span></p></blockquote><ul><li><span>其他绘制函数</span></li></ul><blockquote><p><span>用户可以添加绘制圆形、矩形、网络型等函数来补充GUI功能。</span></p></blockquote><ul><li><span>控件优化</span></li></ul><blockquote><p><span>增加控件属性，比如阴影什么的，这个不知道咋做。自己想</span></p><p><span>增加选择反馈（比如触摸选中框，原有控件可以实现，定义一个次底层的控件，当某个控件被选中时，visible = 1, 进行显示即可）。更多其他的，自行完成。</span></p></blockquote><p>&nbsp;</p><h2><a name="注意事项" class="md-header-anchor"></a><span>注意事项</span></h2><ol start='' ><li><span>更新控件属性时，注意与字符串相关的控件字符串内容地址不允许为空，为空时在绘制文字里将会产生Hardfault( 目前循环提取控件内容时间较长，减少不必要的检查操作--建议增加指针检查)</span></li><li><span>更新控件属性务必确认更新的属性与控件相对应，否则不会得到预期的结果</span></li><li><span>当界面需要上下滚动时，同时包含了水平文字滚动效果，需要维护水平文字的滚动偏移量</span></li></ol><h3><a name="ui界面延伸使用" class="md-header-anchor"></a><span>UI界面延伸使用</span></h3><p><span>由于当前界面由一个个控件组成，但有些功能需要控件组合才能够实现。对此，需要使用复杂功能的组合控件，当前需要用户手功编写代码进行维护。</span></p><blockquote><p><span>绘制过程中，每个界面都有偏移量控置，这样在切换界面时用于计算当前位置。界面内控件的位置是相对于界面的位置，不是绝对位置。</span></p><p><span>container控件下的子控件，又是相对于container的位置，而不是整个界面折位置。</span></p></blockquote><ul><li><strong><span>滚动效果</span></strong></li></ul><p><span>滚动效果用于更新当前所有控件的偏移量，当发生偏移时，相关控件需要根据当前的滚动距离，计算控件本身新的位置地址（而在绘制过程中，主界面的偏移地址</span></p><ul><li><strong><span>局部刷新</span></strong></li></ul><p><span>局部刷新用于快速刷新部分显示区域，而不用每次都需要更新整屏内容。</span></p><ul><li><strong><span>文字滚动</span></strong></li></ul><p><span>文字滚动使用了</span><code>textscroll</code><span> 控件来实现，但滚动过程仍然由用户代码控制，滚动间隔、每次滚动像素点。</span></p><p><span>文字滚动与局部刷新配合使用，可以减少刷新时长。</span></p><p><span>在设置界面中，使用container将文字分为多行显示且实现多个item显示，一般来说只允许显示中间item, 但滚动时item交换，因此</span><code>textscroll</code><span>控件文字发生变化且滚动偏移量也同样发生变化，需要维护每个</span><code>textscroll</code><span>的偏移地址。</span></p><ul><li><strong><span>颜色替换</span></strong></li></ul><p><span>在使用</span><code>picker</code><span> 时，需要设置中间字符颜色，使用</span><code>colorreplace</code><span>配合使用。指定区域内的颜色替换为其他颜色。</span></p><p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p><h2><a name="附录" class="md-header-anchor"></a><span>附录</span></h2><p>&nbsp;</p></div>
</body>
</html>